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