只需為下拉菜單的任意 <li> 元素添加 .dropdown-submenu 的類，並在該 <li> 元素下添加 .dropdown-menu 類的列表，就可以為該菜單項添加一個子下拉菜單。如：
<div class="dropdown">
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
<li><a tabindex="-1" href="#">Second level link</a></li>
</ul>
</li>
</ul>
</div>
效果如圖 4‑6所示：
圖4-6 Bootstrap多級下拉菜單組件
默認情況下，子菜單會在父菜單的右側彈出。如果希望它在父菜單的左側彈出，只需給相應的 <li> 元素添加 .pull-left 類即可：
<li class="dropdown-submenu pull-left">
…
</li>
效果如圖 4‑7所示：
圖4-7 左側彈出的Bootstrap下拉菜單組件
另外，子菜單默認是以下拉形式彈出。如果希望以上拉形式彈出，只需把整個下拉菜單包裹在 .dropup 的容器中即可：
<div class="dropup">
…
</div>
效果如圖 4‑8所示：
