bootstrap多级下拉菜单

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