How Can I Create Multilevel Dropdown Menus in Twitter Bootstrap 2?

Creating Multilevel Dropdown Menus with Twitter Bootstrap 2

Twitter Bootstrap 2 provides a robust set of components, but multilevel dropdown menus are not natively supported. This issue has raised concerns within the GitHub community, leading many developers to seek alternative solutions.

To address this limitation, the following CSS code can be implemented:

.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;
}

By adding this CSS to your application, you can create a custom .sub-menu class that allows you to extend the standard dropdowns to include additional levels. The position and visibility of the submenu can be controlled through the CSS.

This solution was created before Bootstrap version 3, which introduced native support for multilevel dropdowns. If you are using Bootstrap version 2, this solution is suitable for achieving a similar functionality. However, for Bootstrap versions 3 and later, the use of this solution is no longer necessary.

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