How to Create a Multilevel Dropdown Menu in Twitter Bootstrap 2?

Multilevel Dropdown Menu for Twitter Bootstrap 2

Creating a multilevel dropdown menu using elements from Twitter Bootstrap 2 requires a custom implementation.

Original Response Pre-v2.1.1

Bootstrap 2 does not natively support multilevel dropdowns. To achieve this, you can use additional CSS to position submenu dropdowns adjacent to the parent menu item.

.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 {
  /* Styling for the arrow pointer */
  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 {
  /* Additional styling for the arrow pointer */
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

Updated Response v2.1.1 and Later

For Bootstrap versions 2.1.1 and above, multilevel dropdowns are included by default. Simply follow the guidelines in the documentation:

[Bootstrap Multilevel Dropdown Documentation](https://getbootstrap.com/docs/2.3.2/components/#dropdowns)

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