Wie kann ich ein mehrstufiges Dropdown-Menü nur mit CSS erstellen?-CSS-Tutorial-php.cn

Wie kann ich ein mehrstufiges Dropdown-Menü nur mit CSS erstellen?

Mary-Kate Olsen

Freigeben： 2024-11-29 20:27:13

Original

270 Leute haben es durchsucht

How Can I Create a Multi-Level Dropdown Menu Using Only CSS?

Mehrstufige Dropdown-Menüs in reinem CSS: Eine umfassende Anleitung

Das Erstellen mehrstufiger Dropdown-Menüs mit CSS kann eine leistungsstarke Organisationstechnik sein komplexe Navigationsstrukturen. Auch wenn es möglicherweise noch ältere Methoden gibt, stellt dieser Artikel einen modernen und effizienten Ansatz vor, um diese Funktionalität mithilfe von reinem CSS zu erreichen.

Der Schlüssel zum Aufbau mehrstufiger Menüs in CSS liegt in der Manipulation der Position und der Anzeigeeigenschaften des Menüs Artikel. Durch die Verwendung der absoluten Positionierung der Dropdowns und die Steuerung ihrer Sichtbarkeit mit der Anzeigeeigenschaft ist es möglich, dynamische und anpassbare Menüs zu erstellen.

Der unten bereitgestellte Code veranschaulicht eine dreistufige Dropdown-Menüstruktur. Das Menü der obersten Ebene enthält vier Hauptkategorien mit jeweils einem möglichen Dropdown-Menü. Die zweite und dritte Ebene erstrecken sich vertikal von ihren jeweiligen übergeordneten Elementen und bieten eine klare hierarchische Ansicht.

.third-level-menu {
    /* Position the third level menu absolutely within its parent */
    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {
    /* Define the appearance and height of third level menu items */
    height: 30px;
    background: #999999;
}

.third-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.second-level-menu {
    /* Position the second level menu absolutely within its parent */
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {
    /* Position and define the appearance of second level menu items */
    position: relative;
    height: 30px;
    background: #999999;
}

.second-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu {
    /* Style the top level menu as a horizontal list */
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {
    /* Position and define the appearance of top level menu items */
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}

.top-level-menu > li:hover {
    /* Change background color on hover */
    background: #CCCCCC;
}

.top-level-menu li:hover > ul {
    /* Display the next level menu on hover */
    display: inline;
}

/* Styles for the menu links */

.top-level-menu a {
    /* Styling for all links within the menu */
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Stretch the link to cover the entire menu item */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    /* Change link color on hover */
    color: #000000;
}

Nach dem Login kopieren

Um dieses Menü in HTML zu implementieren, verwenden Sie das folgende Markup:

<ul>

Nach dem Login kopieren

By Durch die Kombination dieser CSS- und HTML-Snippets können Sie ein voll funktionsfähiges mehrstufiges Dropdown-Menü erstellen, das ein benutzerfreundliches Navigationserlebnis mit eleganter Optik bietet.

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