Comment créer un menu déroulant à plusieurs niveaux dans Twitter Bootstrap 2 ?

Menu déroulant à plusieurs niveaux pour Twitter Bootstrap 2

La création d'un menu déroulant à plusieurs niveaux à l'aide d'éléments de Twitter Bootstrap 2 nécessite une implémentation personnalisée.

Réponse originale Pré-v2.1.1

Bootstrap 2 ne prend pas en charge nativement les listes déroulantes à plusieurs niveaux. Pour y parvenir, vous pouvez utiliser du CSS supplémentaire pour positionner les listes déroulantes de sous-menu à côté de l'élément de menu parent.

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

Réponse mise à jour v2.1.1 et versions ultérieures

Pour Bootstrap versions 2.1.1 et supérieures, les listes déroulantes à plusieurs niveaux sont incluses par défaut. Suivez simplement les instructions de la documentation :

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

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!