Multi level drop-down menu

In many cases, we may need multi-level pull-down menus. In one pull-down menu item, create another pull-down menu to realize multi-level pull-down menu.

Just add a. Dropdown submenu class to any < li > element of the pull-down menu, and add a list of. Dropdown submenu classes under the < li > element, you can add a sub pull-down menu to the menu item. Such as:

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>

The effect is shown in Figure 4‑6 It is shown that:

Figure 4-6 Bootstrap Multi level pull-down menu component

By default, submenus pop up on the right side of the parent menu. If you want it to pop up on the left side of the parent menu, just give the corresponding <li> Element addition .pull-left Class can be:

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

The effect is shown in Figure 4-7:

Figure 4-7 the Bootstrap pull-down menu component pops up on the left

In addition, the submenu will pop up in the following form by default. If you want the above pull form to pop up, just wrap the entire pull-down menu in the. dropup container:

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

The effect is shown in Figure 4-8:

Figure 4-8 bootstrap pull-up menu component

Copyright notice: from Crooked Web " Bootstrap tutorial >Welcome to read it online and give your valuable comments.