只需为下拉菜单的任意 <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所示：
