Wie kann ich mehrstufige Dropdown-Menüs nur mit CSS erstellen?

Erstellen von mehrstufigen Dropdown-Menüs mit reinem CSS

Nur ​​CSS-basierte mehrstufige Dropdown-Menüs bieten eine saubere und zugängliche Oberfläche Möglichkeit, komplexe Navigationsstrukturen auf einer Website zu organisieren. Obwohl es zahlreiche Ansätze gibt, variiert die optimale Lösung je nach gewünschter Ästhetik und Funktionalität.

Eine effektive Technik besteht darin, eine verschachtelte Listenstruktur zu verwenden und die Untermenüs absolut zu positionieren:

.third-level-menu
{
    -
    position: absolute;
    top: 0;
    right: 150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

Dies Der Code definiert das Untermenü der dritten Ebene, das rechts vom übergeordneten Menüelement positioniert wird.

.second-level-menu
{
    -
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

In ähnlicher Weise definiert dieser Code das Untermenü der zweiten Ebene, das unter dem übergeordneten Menüelement positioniert wird.

.top-level-menu
{
    -
    list-style: none;
    padding: 0;
    margin: 0;
}

Dieser Code definiert das Menü der obersten Ebene, das die übergeordneten Menüelemente enthält.

An Zeigen Sie die Untermenüs an, wenn Sie mit der Maus über den übergeordneten Menüpunkt fahren:

.top-level-menu li:hover > ul
{
    -
    /* On hover, display the next level's menu */
    display: inline;
}

Zusätzlich kann zur visuellen Darstellung ein Stil auf die Menülinks und Listenelemente angewendet werden Anpassung.

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