[HTML] CSS 下拉列表菜单

最新推荐文章于 2025-06-03 11:58:56 发布

原创最新推荐文章于 2025-06-03 11:58:56 发布 · 4.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #MENU #菜单

本文详细介绍了如何使用CSS创建功能丰富的下拉列表菜单，包括样式设计、交互效果以及响应式布局的应用，帮助读者掌握网页导航菜单的制作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 下拉列表菜单。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication6.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <style>
        body {
            width: 95%;
            margin: 0px auto;
        }

        #header {
            height: 50px;
            width: 95%;
        }

        #nav {
            position: absolute; /*菜单绝对定位*/
        }

            #nav > li {
                list-style-type: none; /*去掉第一层li里面的符号*/
                float: left; /*将第一层的li横向摆放*/
                width: 100px; /*设置宽度*/
                font-size: 30px; /*字体大小*/
                background-color: #16b6fc; /*背景颜色*/
                color: white; /*字体颜色*/
            }

                #nav > li > ul > li {
                    list-style-type: none; /*去掉第二层li里面的符号*/
                    font-size: 15px; /*字体大小*/
                    padding-top: 8px; /*设置上间距*/
                    padding-bottom: 8px; /*设置下间距*/
                }

            #nav li ul {
                margin-left: 0px; /*将第二层的ul都移到最左边*/
                padding-left: 0px; /*将第二层的ul都移到最左边*/
                display: none; /*隐藏ul内容，隐藏子菜单内容*/
            }

            #nav > li:hover ul { /*鼠标放在主菜单上，子菜单会显示出来*/
                display: block;
            }

            #nav > li > ul > li:hover { /*鼠标放在子菜单上，了菜单的背景和字体颜色会改变*/
                background-color: white;
                color: black;
            }

        #content {
            clear: both;
            padding-left: 40px;
        }
    </style>




</head>
<body>
    <form id="form1" runat="server">
        <div>

            <div id="header">
                <ul id="nav">
                    <li>menu1
                <ul>
                    <li>menu11</li>
                    <li>menu12</li>
                    <li>menu13</li>
                </ul>

                    </li>
                    <li>menu2
                <ul>
                    <li>menu21</li>
                    <li>menu22</li>
                    <li>menu23</li>
                </ul>

                    </li>
                    <li>menu3
                <ul>
                    <li>menu31</li>
                    <li>menu32</li>
                    <li>menu33</li>
                </ul>



                    </li>
                </ul>



            </div>
            <div id="content">

                <h1>My Page 1</h1>

                <p>I love this game!!!</p>


            </div>

        </div>
    </form>
</body>
</html>