在很多时候，我们可能需要多级下拉菜单。在一个下拉菜单的某个菜单项中，再创建另一个下拉菜单，即可实现多级下拉菜单。

只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类，并在该 <li> 元素下添加 .dropdown-menu 类的列表，就可以为该菜单项添加一个子下拉菜单。如：



  1. <div class="dropdown">
  2.   <ul class="dropdown-menu">
  3.     <li><a tabindex="-1" href="#">Action</a></li>
  4.     <li><a tabindex="-1" href="#">Another action</a></li>
  5.     <li><a tabindex="-1" href="#">Something else here</a></li>
  6.     <li class="divider"></li>
  7.     <li class="dropdown-submenu">
  8.       <a tabindex="-1" href="#">More options</a>
  9.       <ul class="dropdown-menu">
  10.         <li><a tabindex="-1" href="#">Second level link</a></li>
  11.         <li><a tabindex="-1" href="#">Second level link</a></li>
  12.         <li><a tabindex="-1" href="#">Second level link</a></li>
  13.         <li><a tabindex="-1" href="#">Second level link</a></li>
  14.         <li><a tabindex="-1" href="#">Second level link</a></li>
  15.       </ul>
  16.     </li>
  17.   </ul>
  18. </div>


效果如图 4‑6所示：

图4-6 Bootstrap多级下拉菜单组件

默认情况下，子菜单会在父菜单的右侧弹出。如果希望它在父菜单的左侧弹出，只需给相应的 <li> 元素添加 .pull-left 类即可：




  1. <li class="dropdown-submenu pull-left">
  2. …
  3. </li>


效果如图 4‑7所示：

图4-7 左侧弹出的Bootstrap下拉菜单组件

另外，子菜单默认是以下拉形式弹出。如果希望以上拉形式弹出，只需把整个下拉菜单包裹在 .dropup 的容器中即可：




  1. <div class="dropup">
  2. …
  3. </div>


效果如图 4‑8所示：

图4-8 Bootstrap上拉菜单组件

 
关于作者

 
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。


                
        
        
     
          



 
更多推荐


Bootstrap 多级下拉菜单