bootstrap 三级导航

三级导航的实现方式有很多，javascript+css就能实现，很多人也写过相应的插件来专门实现这个效果，对于bootstrap来说，三级导航实现起来就很容易了，用bootstrap实现三级导航的另外一个优点是你可以简单修改样式自定义效果，如何做到呢？
首先看一个简单的三级导航

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <nav role="navigation" class="miscro-font">
        <ul class="nav navbar-nav navbar-left" id="top-nav-menu">
            <li ><span id="index_menu_selected"></span><a href="#" class="click_selected">无子层导航</a> </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">第一级导航 <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu"> <a href="#">第二级导航</a>
                        <ul class="dropdown-menu third-menu">
                            <li><a href="#">第三级导航</a></li>
                        </ul>
                    </li>
                    <li class="dropdown-submenu"> <a href="#">第二级导航</a>
                        <ul class="dropdown-menu third-menu">
                            <li><a href="#">第三级导航</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </nav>

通过css可以设置子层导航的样式，使之在其父导航左右，

        .dropdown-submenu {  
            position: relative;  
        }  
        .dropdown-submenu > .dropdown-menu {  
            top: 0;  
            left: 100%;  
            margin-top: -6px;  
            margin-left: -1px;  
            -webkit-border-radius: 0 6px 6px 6px;  
            -moz-border-radius: 0 6px 6px;  
            border-radius: 0 6px 6px 6px;  
        }  
        .dropdown-submenu:hover > .dropdown-menu {  
            display: block;  
        }  
        .dropdown-submenu > a:after {  
            display: block;  
            content: " ";  
            float: right;  
            width: 0;  
            height: 0;  
            border-color: transparent;  
            border-style: solid;  
            border-width: 5px 0 5px 5px;  
            border-left-color: #ccc;  
            margin-top: 5px;  
            margin-right: -10px;  
        }  
        .dropdown-submenu:hover > a:after {  
            border-left-color: #fff;  
        }  
        .dropdown-submenu.pull-left {  
            float: none;  
        }  
        .dropdown-submenu.pull-left > .dropdown-menu {  
            left: -100%;  
            margin-left: 10px;  
            -webkit-border-radius: 6px 0 6px 6px;  
            -moz-border-radius: 6px 0 6px 6px;  
            border-radius: 6px 0 6px 6px;  
        } 

这样设置出的导航会使得鼠标悬浮在第三层时，对应的第二层父亲导航有不可自定义的悬浮效果，可以使用jQuery设置

$("#top-nav-menu li").bind({
        mouseover:function(){
         $(this).addClass('open');
      },
      mouseout:function(){
       $(this).removeClass('open');
      }
    }); 

    $('ul.third-menu>li>a').hover(function() {//悬浮在三级目录控制二级目录颜色
        $(this).parent('li').parent('ul').prev('a').css({'background-color':'rgb(50,118,163)'});
        $(this).parent('li').parent('ul').prev('a').css({'color':'#fff'});
    }, function() {
        if(!$(this).parent('li').hasClass('open')){
            $(this).parent('li').parent('ul').prev('a').css({'background-color':'#fff','color':'black'});
        }else{
            $(this).parent('li').parent('ul').prev('a').css({'background-color':'rgb(50,118,163)','color':'#fff'});
        }

    });

    $('li.dropdown-submenu').hover(function() {//二级目录悬浮与否控制颜色
        $(this).children('a').css({'background-color':'#3276b1','color':'#fff'});
    }, function() {
        $(this).children('a').css({'background-color':'#fff','color':'black'});
    });

当然背景色可以根据需要自行设置。