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
Lösung zum Ändern des Datenspeicherorts der Datenbank in MySQL 5.7
Da die in der MySQL-Datenbank gespeicherten Daten...
Die am häufigsten verwendeten HTML-Tags zum Erstellen von Webseiten
1. Optimierung häufig verwendeter HTML-Tags HTML ...
Lösen Sie das Problem der leeren Lücke am unteren Rand des Img-Bildes
Bei der Arbeit an einem aktuellen Projekt habe ic...
Vue implementiert die Frage-Antwort-Funktion
1. Schnittstelle für die Anforderung einer Antwor...
Detaillierte Erläuterung zur Verwendung von Amoeba zum Implementieren der Lese-/Schreibtrennung einer MySQL-Datenbank
Es gibt viele Lese-/Schreibtrennungsarchitekturen...
Implementierungsfallcodeanalyse für dynamische und statische Trennung von Nginx
Trennung von statischer und dynamischer Dynamisch...
Zusammenfassung der Verwendung von MySQL Online DDL gh-ost
Hintergrund: Als DBA werden die meisten DDL-Änder...
Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA
Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...
Implementierungsschritte für die Docker-Bereitstellung von SpringBoot-Anwendungen
Inhaltsverzeichnis Vorwort Docker-Datei Was ist e...
Eine kleine Frage zur Ausführungsreihenfolge von SQL in MySQL
Ich bin heute bei der Arbeit auf ein SQL-Problem ...
Detailliertes Tutorial zur Installation und Konfiguration von MySQL 5.7.20 unter Centos7
1. Laden Sie das MySQL 5.7-Installationspaket von...
In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Ich möchte eine Frage stellen. Ich habe in Dreamw...
Implementierung der Docker-Bereitstellung des Nuxt.js-Projekts
Offizielle Docker-Dokumentation: https://docs.doc...
Einführung in die Installationsmethode in Vue
Inhaltsverzeichnis 1. Weltweit registrierte Kompo...
Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen
Das Div+CSS-Layout zur Erzielung einer 2-Enden-Au...