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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!