How to Create a Multi-Level Dropdown Menu in Twitter Bootstrap 2?

Multilevel Dropdown Menu in Twitter Bootstrap 2

It's possible to create a multi-level dropdown menu using elements from Twitter Bootstrap 2, even though this feature is not natively supported.

Updated Answer (Bootstrap v2.1.1)

Bootstrap now supports multi-level dropdowns by default in v2.1.1. The updated stylesheet provides styling for nested dropdown menus.

Original Answer

Originally, Bootstrap didn't provide sub-menu support. However, a custom solution can be implemented by leveraging CSS and HTML.

CSS

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
    display: block;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

HTML

Add a .sub-menu class to the nested dropdown menu items:

<ul class="dropdown-menu">
  <li>Item 1</li>
  <li class="sub-menu">
    <a href="#">Item 2</a>
    <ul class="dropdown-menu">
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

This solution positions the nested dropdown menu to the right of the parent menu item and adds an arrow to indicate a clickable submenu.

The above is the detailed content of How to Create a Multi-Level Dropdown Menu in Twitter Bootstrap 2?. For more information, please follow other related articles on the PHP Chinese website!