Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein CSS-Drop-Up-Menü anstelle eines Dropdown-Menüs erstellen?

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

Barbara Streisand
Freigeben: 2024-12-11 01:06:09
Original
670 Leute haben es durchsucht

How Can I Create a CSS Drop-Up Menu Instead of a Drop-Down Menu?

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 */
}
Nach dem Login kopieren

Demo 2:

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

#menu>ul>li:hover>ul { 
    bottom:100%;
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage