Wie verwandle ich ein CSS-Dropdown-Menü in ein Drop-Up-Menü?

Dropdown-Untermenü des vertikalen Dropdown-Menüs: implementiert mit reinem CSS

Für Dropdown-Menü, umgewandelt in Dropdown-Menü Menüs kommen häufig vor, insbesondere wenn sich die Menüleiste am unteren Rand des Layouts befindet. Um dies zu erreichen, müssen wir einige Änderungen an den CSS-Stilen vornehmen.

Frage: Dropdown-Menü in Dropdown-Menü konvertieren

Gegebenes Dropdown-Menü-CSS: Wie ändert man den Stil so, dass er zum Dropdown-Menü wird? ?

Lösung: #menu:hover ul li:hover ul-Regel anpassen

Kann durch Hinzufügen des Attributs „bottom: 100%“ zu #menu:hover ul li erfolgen: Bewegen Sie den Mauszeiger über die UL-Regeln, um die Drop-up-Funktion zu implementieren.

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
}

Optionale Verbesserung: Drop-up nur auf Untermenüs der obersten Ebene anwenden

Um zu verhindern, dass Untermenüs auch Drop-up anwenden Für den Effekt können Sie die folgenden Regeln hinzufügen:

#menu>ul>li:hover>ul {
    bottom: 100%;
}

Andere Überlegungen: Ränder wiederherstellen

Das Hinzufügen des Attributs unten: 100 % kann den Rand des entfernen Untermenü. Um den Rand wiederherzustellen, können Sie die folgenden Attribute hinzufügen:

#menu>ul>li:hover>ul {
    bottom: 100%;
    border-bottom: 1px solid transparent
}

Demonstration

Hier sind einige Beispiele, die diese Technik demonstrieren:

• [Demo 1](https://jsfiddle.net/W5FWW/4/)
• [Demo 2](https://jsfiddle.net/zyp6c/)
• [Demo 3](https ://jsfiddle.net/phkj20zo/)

Das obige ist der detaillierte Inhalt vonWie verwandle ich ein CSS-Dropdown-Menü in ein Drop-Up-Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!