Heim > Artikel > Web-Frontend > Wissen Sie, wie man mit reinem CSS einen Dropdown-Menüeffekt erzielt?
Die spezifischen Implementierungsschritte sind wie folgt:
(Empfohlenes Video-Tutorial: css-Video-Tutorial)
1. Verwenden Sie die Tags ul und li, um eine Assoziationsstruktur zu schreiben (die Eltern-Kind-Beziehung zwischen ul und li ist). natürliche und allgemeine Assoziationsstrukturen sind)
<ul class="nav"> <a href="#">服装</a> <ul class="plat"> <li><a href="#">衬衫</a></li> <li><a href="#">棉袄</a></li> <li><a href="#">裤衩</a></li> </ul> </ul>
2 : für das erste a-Tag: Hover-Selektor; Funktion implementiert: Wenn die Maus über das a-Label bewegt wird, ist der verborgene Teil des Inhalts sichtbar
*{ padding: 0; margin: 0; }
6. Bisher können Sie Ihre eigenen Stile hinzufügen um das Benutzererlebnis zu optimieren
Zum Beispiel:
Horizontal angeordnete Menüleiste:
ul,a{ font-size: 20px; list-style: none; text-decoration: none; background-color: #3C3C3C; color: #FFFFFF; width: 100px; text-align: center; border: 0px solid black; border-radius: 5px; /*圆角*/ margin-top: 1px; } a{ display: block; }
Die Maus gleitet über die Spalte, um ihre Position anzuzeigen
.plat{ display: none; }
Ergebnis:
Alle Codes lauten wie folgt:
.nav:hover .plat{ display: block; clear: both; }Verwandte Empfehlungen:
CSS-Tutorial
Das obige ist der detaillierte Inhalt vonWissen Sie, wie man mit reinem CSS einen Dropdown-Menüeffekt erzielt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!