前面介紹的都是使用Bootstrap框架制作一級導航，但很多時候，在Web頁面中是離不開二級導航的效果。那么在Bootstrap框架中制作二級導航就更容易了。只需要將li當作父容器，使用類名“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="##">關于我們</a></li>
</ul>

運行效果如下：

通過瀏覽器調試工具，不難發現，點擊有二級導航的菜單項，會自動添加“open”類名，再次點擊就會刪除添加的“open”類名：

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

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

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

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

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

運行效果如下：

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

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