Nehmen wir ein anderes Beispiel, das heute jemand gesagt hat: Pure CSS Dropdown-Menü:
Reproduktionsdiagramm
Die Implementierung davon ist hauptsächlich sehr einfach: die Verwendung von Schwebe- und Übergangsattributübergang.
Code:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> CSS </title> <style> *{Margin: 0; Polsterung: 0; Schriftgröße: 16px; Schriftfamilie: "Microsoft Yahei"; } #Container {width: 100px; Rand: 0 Auto; Text-Align: Mitte; Position: Relativ; } #Container ul {Listenstil: Keine; } #Container span {display: inline-block; Breite: 100px; Höhe: 30px; Zeilenhöhe: 30px; Cursor: Zeiger; } #Container ul {Höhe: 0; Breite: 100px; Überlauf: versteckt; Übergang: alle 1s; Position: absolut; Top: 30px; links: 0px; } #Container: Hover ul {Höhe: 330px; } #Container ul li {Hintergrund: #eee; Rand: 3px; Cursor: Zeiger; Höhe: 30px; Zeilenhöhe: 30px; } </style></head><body> <div id="container"> <span>Mobile</span> <ul> <li>1 here</li> <li>2 here</li> <li>3 here</li> <li>4 here</li> <li>5 here</li> <li>6 here</li> <li>7 here</li> <li>8 here</li> <li>9 here</li> <li>10 Hier </li> </ul> </div> </body> </html>Da UL ein Skalierungsobjekt ist, sollte es vom Dokumentfluss getrennt werden. Es wird das Layout nicht beeinflussen, wenn es praktisch ist. Geben Sie ihm einfach eine absolute Position.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.