二级导航

Posted Sunny_Lee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二级导航相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <title>纯CSS二级导航栏</title>
        <meta charset="utf-8" />
        <style type="text/css">       
            *{
                margin:0;
                padding:0;
                list-style:none;
                font-size:12px;
            }
                 
            body{
                background:#FFF;
            }   
             
            a{
                text-decoration:none;
            }
             
            .nav{
                width:500px;
                height:200px;
                margin:100px auto 0 auto;
                text-align:center;
            }
 
            .nav ul{
                float:left;
            }
 
            .nav ul li{
                float:left;
                width:60px;
                line-height:40px;
                position:relative;
                background-color:#F8F8F8;                           
            }
 
            .nav .nav_first{
                border-left:1px dotted #EAEAEA;
            }
             
            .nav ul li a{
                color:#666;
                display:block;
                font-family:Microsoft YaHei;
                border:1px dotted #EAEAEA;
                border-left:none;
            }
 
            .nav ul li a:hover{
                color:#000;
            }       
 
            .nav ul li .active{
                background-color:#D8450B;
                border:1px solid #D8450B;
                color:#EEE;
            }               
 
            .nav ul li .active:hover{
                background-color:#D8450B;
                color:#EEE;
            }
 
            .nav ul li:hover .sub_nav{
                display:block;
            }
         
            .nav .sub_nav{
                position:absolute;
                width:90px;
                display:none;
                left:-1px;
            }
             
            .nav .sub_nav li{
                text-align:left;
                width:100px;                
            }
             
            .nav .sub_nav b{
                width:15px;
                background-color:#CCC;
                display:inline-block;
                margin-right:15px;
            }
 
            .nav .sub_nav li a{
                border-top:none;
            }
 
            .nav .sub_nav li .sub_nav_last{
                border-bottom:none;
            }
                 
            .nav .sub_nav li a:hover b{
                background-color:#999;
            }
 
            .nav .sub_nav li .sub_active{
                 
            }
 
            .nav .caret {
                display: inline-block;
                width: 0;
                height: 0;
                vertical-align: middle;             
                border-top: 4px dashed;
                border-top: 4px solid \\9;
                border-right: 4px solid transparent;
                border-left: 4px solid transparent;
                border-top-color: #777777;
                margin-left:5px;
            }
 
        </style>
    </head>
    <body>        
        <div id="nav" class="nav">
            <ul>
                <li><a href="" class="active nav_first">首页</a></li> 
                <li><a href="">博文<div class="caret"></div></a>                
                    <ul class="sub_nav">
                        <li><a href="" class="sub_active"><b>&nbsp;</b>生活随记</a></li>
                        <li><a href=""><b>&nbsp;</b>影视推荐</a></li>
                        <li><a href=""><b>&nbsp;</b>美文欣赏</a></li>
                        <li><a href=""><b>&nbsp;</b>互联杂谈</a></li>
                        <li><a href=""><b>&nbsp;</b>资源分享</a></li>
                    </ul>
                </li> 
                <li><a href="">音乐<div class="caret"></div></a>
                    <ul class="sub_nav">
                        <li><a href="" class="sub_active"><b>&nbsp;</b>生活随记</a></li>
                        <li><a href=""><b>&nbsp;</b>影视推荐</a></li>
                        <li><a href=""><b>&nbsp;</b>美文欣赏</a></li>
                        <li><a href=""><b>&nbsp;</b>互联杂谈</a></li>
                        <li><a href="" class="sub_nav_last"><b>&nbsp;</b>资源分享</a></li>
                    </ul>
                </li> 
                <li><a href="">说说</a></li>  
                <li><a href="">相册</a></li>  
                <li><a href="">留言</a></li>  
            </ul>
        </div>    
 
    </body>
</html>

效果：

以上是关于二级导航的主要内容，如果未能解决你的问题，请参考以下文章

js+数据库生成三级动态tree导航菜单

jquery实现的点击二级下拉导航菜单

android 二级导航这个界面怎么做出来?

html css 求助大神：导航栏菜单问题，二级菜单内容会遮盖掉后面的一级菜单栏选项。

使用导航从一个片段导航到另一个片段后，防止后按工作

条件片段和导航重用