HTML+CSS zum Erstellen eines Dropdown-Menüs
|
1. Beispiel einer Dropdown-Liste Der Code lautet wie folgt:
<!doctype html>
<html>
<Kopf>
<meta charset="utf-8"/>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Textdekoration: keine;
Listenstil: keiner;
}
Körper{
Textausrichtung: zentriert;
}
.header{
Anzeige: Inline-Block;
Position: relativ;
Hintergrundfarbe: #4CAF50;
}
.header:hover .downbtn{
Anzeige:Block;
Hintergrundfarbe: #f1f1f1;
}
.header:hover{
Hintergrundfarbe: #3e8e41;
}
.header span{
Polsterung: 15px;
Zeilenhöhe: 61px;
Cursor:Zeiger;
Farbe: weiß;
}
.header .downbtn{
Anzeige: keine;
Position: absolut;
Hintergrundfarbe: #f9f9f9;
Kastenschatten: 0px 8px 16px 0px rgba (0,0,0,0,2);
Mindestbreite: 160px;
}
.header .downbtn li{
Zeilenhöhe: 30px;
Textausrichtung: links;
Polsterung links: 5px;
}
.header .downbtn a:hover{
Textdekoration: Unterstreichen;
Farbe: #f00;
}
.header .downbtn a{
Anzeige:Block;
Farbe: Schwarz;
Breite: 100 %;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Header">
<span>Dropdown-Liste</span>
<div Klasse="downbtn">
<ul>
<li><a href="#">Dropdown-Liste 01</a></li>
<li><a href="#">Dropdown-Liste 02</a></li>
<li><a href="#">Dropdown-Liste 03</a></li>
<li><a href="#">Dropdown-Liste 04</a></li>
<li><a href="#">Dropdown-Liste 05</a></li>
</ul>
</div>
</div>
</body>
</html>
Das Wirkungsdiagramm sieht wie folgt aus:
2. Technische Punkte
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
<<: W3C Tutorial (12): W3C Soap Aktivität
>>: Wo wird der von IntelliJ IDEA mit Tomcat bereitgestellte Projektspeicherort verwendet?
Artikel empfehlen
Beispiele für 4 Methoden zum Einfügen großer Datenmengen in MySQL
Vorwort Dieser Artikel stellt hauptsächlich 4 Met...
Detaillierte Erläuterung der CentOS7-Onlineinstallation von Docker 17.03.2 unter Verwendung der Alibaba Cloud Docker Yum-Quelle
Referenzdokumentation Offizielle Docker-Installat...
So implementieren Sie die Paging-Funktion des MyBatis-Interceptors
So implementieren Sie die Paging-Funktion des MyB...
Detailliertes Verständnis des Plug-In-Mechanismus und der Installationsdetails von Vue
Vorwort: Wenn wir Vue verwenden, verwenden und sc...
Detaillierte Erklärung zur Verwendung der JavaScript-Zwischenablage
(1) Einleitung: clipboard.js ist ein leichtes Jav...
Erläuterung der HTML-Tags
Erläuterung der HTML-Tags 1. HTML-Tags Tag: !DOCT...
VMware Workstation 14 Pro installiert CentOS 7.0
Die spezifische Methode zur Installation von Cent...
Zehn beliebte Regeln für das Interface-Design
<br />Dies ist ein Artikel, den ich vor lang...
Detaillierte Erklärung des Unterschieds zwischen adaptiver und responsiver Analyse in der Umgangssprache
Basierend auf täglichen Entwicklungserfahrungen u...
Detaillierte Erklärung zur Verwendung mehrerer Timer in CocosCreator
1. setTimeOut Drucken Sie abc nach 3 Sekunden. Nu...
Zusammenfassung der Bootstrap-Lernerfahrung - Austausch von Designs im CSS-Stil
Aufgrund der Anforderungen des Projekts habe ich ...
So erhalten Sie die Schnittmenge/Differenz/Vereinigung zweier Mengen in MySQL
Typische MySQL-Szenarien: Schnittmenge und Differ...
Tutorial zur Installation von VMWare15.5 unter Linux
Um VMWare unter Linux zu installieren, müssen Sie...
Einige Fragen zu Hyperlinks
Ich freue mich sehr, an dieser Folge der Kartoffe...
Umfassendes Verständnis des MySQL-Protokolls für langsame Abfragen
Inhaltsverzeichnis Was ist das Protokoll langsame...