前面介紹的都是使用Bootstrap框架制作一級導(dǎo)航，但很多時候，在Web頁面中是離不開二級導(dǎo)航的效果。那么在Bootstrap框架中制作二級導(dǎo)航就更容易了。只需要將li當(dāng)作父容器，使用類名“dropdown”，同時在li中嵌套另一個列表ul，使用前面介紹下拉菜單的方法就可以：

<ul class="nav nav-pills">
     <li class="active"><a href="##">首頁</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            …
       </ul>
     </li>
     <li><a href="##">關(guān)于我們</a></li>
</ul>

運行效果如下：

通過瀏覽器調(diào)試工具，不難發(fā)現(xiàn)，點擊有二級導(dǎo)航的菜單項，會自動添加“open”類名，再次點擊就會刪除添加的“open”類名：

簡單點來說，就是依靠這個類名來控制二級導(dǎo)航顯示與否，并且設(shè)置了背景色和邊框：

/*源碼查看bootstrap.css文件第3479行～3484行*/

.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}

大家回憶一下，在制作下拉菜單時，可以用分隔線，那么在二級導(dǎo)航中是否可以呢？我們一起來看看：

不用再說太多，只需要添加“<li class=”nav-divider”></li>”這樣的一個空標(biāo)簽就可以了。

運行效果如下：

/*源碼請查看bootstrap.css文件第3485行～第3490行*/

.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}