Dropdown-Menüs mit mehreren Ebenen mit reinem CSS erstellen

Das Erstellen von Dropdown-Menüs mit mehreren Ebenen mit reinem CSS hat sich seitdem weiterentwickelt frühe L?sungen, die Sie erw?hnt haben. Hier ist ein moderner Ansatz, der eine schlanke und wartbare Implementierung bietet:

Diese Methode nutzt eine Kombination aus verschachtelten ungeordneten Listen (

s) und absoluter Positionierung, um die mehrstufige Struktur zu erstellen. Jede Ebene des Menüs wird durch ein separates
dargestellt. Element, und ihre Positionen werden dynamisch basierend auf ihren übergeordneten Elementen gesteuert.

Das folgende Code-Snippet stellt die CSS-Stile für das Menü bereit:

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

.third-level-menu > li {
    height: 30px;
    background: #999999;
}
.third-level-menu > li:hover { background: #CCCCCC; }

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

.second-level-menu > li {
    position: relative;
    height: 30px;
    background: #999999;
}
.second-level-menu > li:hover { background: #CCCCCC; }

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

.top-level-menu > li {
    position: relative;
    float: left;
    height: 30px;
    width: 150px;
    background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }

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

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

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }

Die HTML-Struktur für das Menü ist wie folgt :

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

Dieser Ansatz stellt sicher, dass das Menü reaktionsf?hig bleibt und sich an verschiedene Bildschirmgr??en und Ger?teausrichtungen anpasst. Au?erdem ist kein JavaScript erforderlich, sodass es mit allen Browsern kompatibel ist.

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