html里面有一个下拉导航,很多时候都有用到,今天分享一个下拉导航的样式代码,当然,下拉导航的样式有好几种实现方式,废话不多说,直接上代码

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>下拉导航</title>
  
    <style>
        body {
            width: 95%;
            margin: 0 auto;
                  background:red;
        }
  
        #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</h1>
                <p>点击测试下拉导航吧!!!</p>
    </div>  
        </div>
    </form>
</body>
</html>

总结要点:HTML下拉要注意层级结构,其次是要对主导航的无序列表ul设置绝对定位,不过,不用定位也能实现。

点赞(1) 打赏

Comment list 共有 0 条评论

暂无评论
立即
投稿

个人微信号

微信扫一扫联系我

发表
评论
返回
顶部