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
WeChat-Miniprogramme ermöglichen nahtloses Scrollen
In diesem Artikelbeispiel wird der spezifische Co...
So installieren Sie Tomcat-8.5.39 auf centos7.6
So installieren Sie Tomcat-8.5.39 auf CentOS 7.6....
mysql installer web community 5.7.21.0.msi grafik-tutorial zur installation
In diesem Artikelbeispiel wird der spezifische Co...
Grafisches Tutorial zur Installation und Konfiguration von Ubuntu Server 18.04.5 LTS Server Edition
1. Ubuntu Server 18.04.5 LTS-Systeminstallation U...
Lösung für das Problem des unzureichenden Speicherressourcenpools des Docker-Servers
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Rendering-Funktion und JSX-Details
Inhaltsverzeichnis 1. Grundlagen 2. Knoten, Bäume...
Ubuntu 20.04 setzt eine statische IP-Adresse (einschließlich verschiedener Versionen)
Da Ubuntu 20.04 das Netzwerk über Netplan verwalt...
React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste
React Native implementiert die Überwachungsgeste ...
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
In diesem Artikel wird der spezifische Code der o...
HTML+CSS zum Erstellen eines Dropdown-Menüs
1. Beispiel einer Dropdown-Liste Der Code lautet ...
Detaillierte Erklärung zur Verwendung von MySQL, wobei
Inhaltsverzeichnis 1. Einleitung 2. Haupttext 2.1...
MySQL 5.7.18 Green Edition Download- und Installations-Tutorial
Dieser Artikel beschreibt den detaillierten Vorga...
JavaScript Canvas zeichnet dynamische Drahtgittereffekte
In diesem Artikel wird der spezifische Code des d...
Lösung für das Problem, dass der obere Rand des untergeordneten Elements dazu führt, dass sich das übergeordnete Element verschiebt
Problembeschreibung Als ich heute den Seitenstil ...
So verhindern Sie Event-Bubbling in JavaScript
Wir müssen darauf achten, dass die Eigenschaften ...