Bootstrap 多级下拉菜单

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

只需为下拉菜单的任意

元素添加 .dropdown-submenu 的类，并在该

元素下添加 .dropdown-menu 类的列表，就可以为该菜单项添加一个子下拉菜单。如：

1. class="dropdown">
2.   class="dropdown-menu">
3.    
4. tabindex="-1" href="#">Action
5.    
6. tabindex="-1" href="#">Another action
7.    
8. tabindex="-1" href="#">Something else here
9.     class="divider">
10.     class="dropdown-submenu">
11.       tabindex="-1" href="#">More options
12.       class="dropdown-menu">
13.        
14. tabindex="-1" href="#">Second level link
15.        
16. tabindex="-1" href="#">Second level link
17.        
18. tabindex="-1" href="#">Second level link
19.        
20. tabindex="-1" href="#">Second level link
21.        
22. tabindex="-1" href="#">Second level link
23.      
24.    
25.  

效果如图 4‑6所示：

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

默认情况下，子菜单会在父菜单的右侧弹出。如果希望它在父菜单的左侧弹出，只需给相应的

元素添加 .pull-left 类即可：

1. class="dropdown-submenu pull-left">
2. …

效果如图 4‑7所示：

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

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

1. class="dropup">
2. …

效果如图 4‑8所示：

图4-8 Bootstrap上拉菜单组件

关于作者

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