Wie kann ich ein CSS-Drop-Up-Menü anstelle eines Dropdown-Menüs erstellen?

Dropdown-Menü mit reinem CSS

In diesem Artikel wird die Anpassung eines mit reinem CSS erstellten Dropdown-Menüs besprochen, um es zu einem zu machen „Drop-up“-Menü anstelle eines „Drop-down“-Menüs. Die Menüleiste befindet sich unten im Layout und die Frage ist, wie man sie nach oben öffnet.

Lösung

Um ein Dropdown-Menü zu erstellen, Die CSS-Regeln müssen angepasst werden.

Demo 1:

Unten hinzufügen: 100 %; zur bestehenden CSS-Regel:

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

Demo 2:

Um zu verhindern, dass Untermenüs vom Dropdown-Verhalten betroffen sind, verwenden Sie diese Regel:

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

Demo 3:

So stellen Sie den Rand um das wieder her Dropdown-Menü:

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

Hier ist eine JSFiddle-Demo: http://jsfiddle.net/W5FWW/4/

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