Wie kann ich mit Twitter Bootstrap 2 Dropdown-Menüs mit mehreren Ebenen erstellen?

Dropdown-Menüs mit mehreren Ebenen mit Twitter Bootstrap 2 implementieren

Twitter Bootstrap 2 verfügt von Haus aus nicht über die Möglichkeit, Dropdown-Menüs mit mehreren Ebenen zu erstellen. Um diese Einschränkung zu überwinden, haben Entwickler kreative Workarounds mit zusätzlichen CSS- und HTML-Elementen entwickelt.

Benutzerdefinierte CSS-Lösung

Ein Ansatz besteht darin, benutzerdefiniertes CSS hinzuzufügen, um das Erscheinungsbild und das Verhalten zu definieren von Untermenüs:

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

Dieses CSS positioniert Untermenüs neben ihren übergeordneten Menüelementen und berechnet ihre Abmessungen und Positionen entsprechend.

Hinweis: Dieser Ansatz wurde in Bootstrap 3 veraltet und ist in späteren Versionen nicht mehr erforderlich.

Das obige ist der detaillierte Inhalt vonWie kann ich mit Twitter Bootstrap 2 Dropdown-Menüs mit mehreren Ebenen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!