Comment puis-je créer des menus déroulants à plusieurs niveaux avec Twitter Bootstrap 2 ?

Implémentation de listes déroulantes à plusieurs niveaux avec Twitter Bootstrap 2

Twitter Bootstrap 2 n'a pas nativement la possibilité de créer des menus déroulants à plusieurs niveaux. Pour surmonter cette limitation, les développeurs ont conçu des solutions de contournement créatives en utilisant des éléments CSS et HTML supplémentaires.

Solution CSS personnalisée

Une approche consiste à ajouter du CSS personnalisé pour définir l'apparence et le comportement. de sous-menus :

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

Ce CSS positionne les sous-menus adjacents à leurs éléments de menu parent et calcule leurs dimensions et positions en conséquence.

Remarque : Cette approche est obsolète dans Bootstrap 3 et n'est plus nécessaire dans les versions ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!