How to Create Multilevel Dropdown Menus in Twitter Bootstrap?

Multilevel Dropdown Menus with Twitter Bootstrap

Twitter Bootstrap 2 lacks the feature of multilevel dropdown menus. However, there is a workaround that can be implemented to achieve this Funktionalität.

Original Answer (Bootstrap Version 3)

In Bootstrap version 3 and above, multilevel dropdown menus are supported by default. Refer to the following fiddle for an example:

http://jsfiddle.net/2Smgv/2858/

Original Answer (Bootstrap Version 2)

For older versions of Bootstrap, here is a CSS hack that can be applied:

/* CSS code for sub-menu customization */
.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;
}

This CSS creates a new ".sub-menu" class to handle 2-level drop-down menus, positions them next to menu items, and modifies the arrow to appear on the left of the submenu group.

Demo

You can view a demo of this workaround here: [Demo Link]

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