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
Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung
Befehl „touch“ Es hat zwei Funktionen: Eine beste...
React implementiert Endlosschleifen-Scrollinformationen
In diesem Artikel wird der spezifische Code von R...
So verwenden Sie den Linux-Befehl seq
1. Befehlseinführung Mit dem Befehl seq (Sequence...
So zentrieren Sie Ihre HTML-Schaltfläche
Wie zentrieren Sie Ihre HTML-Schaltfläche selbst?...
Chinesische Parameterbeschreibung und Verwendungsbeispiele für ffmpeg
1. Wenn ffmpeg Videodateien überträgt, können die...
Detaillierte Erklärung der MySQL-Zeichenfolgenverkettungsfunktion GROUP_CONCAT
Im vorherigen Artikel habe ich ein tabellenübergr...
Vue3.0 implementiert die Fallstudie zum Lupeneffekt
Der zu erzielende Effekt ist: Festes Vergrößern a...
Detaillierte Analyse der Ursache für die Meldung des Fehlers „Der Server wird beendet, ohne die PID-Datei zu aktualisieren“ beim Starten von MySQL
Bei vielen Benutzern ist dieser Fehler beim Start...
Einführung in den Unterschied zwischen Verknüpfungssymbol und Symbolcode
Anweisung 1: <link rel="Shortcut-Symbol&qu...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
Detaillierte Analyse des langsamen Abfrageproblems beim Senden von MySQL-Daten
Anhand eines Beispiels habe ich Ihnen die Lösung ...
25 Tools zur Verbesserung der Website-Benutzerfreundlichkeit und Conversion-Raten
Bei einer Website bezieht sich die Benutzerfreundl...
So löschen Sie den gesamten Inhalt eines Verzeichnisses mit Ansible
Studierende, die Ansible verwenden, wissen, dass ...
So verwenden Sie den MySQL-Autorisierungsbefehl „grant“
Die Beispiele in diesem Artikel laufen auf MySQL ...
Vue verwendet Filter zum Formatieren von Daten
In diesem Artikelbeispiel wird der spezifische Co...