CSS zum Erstellen eines dynamischen sekundären Menüs
|
Dynamisches Implementieren eines einfachen sekundären Menüs
Wenn die Maus auf das Etikett der ersten Ebene gelegt wird, nimmt die Maus die Form einer kleinen Hand an, um das Menü der zweiten Ebene anzuzeigen. Der Quellcode lautet wie folgt. Sie können ihn kopieren und direkt verwenden.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
* {Rand: 0; Polsterung: 0;}
ul { Listenstil: keine;}
div {
Breite: 100 %;
Höhe: 50px;
Hintergrundfarbe: #ccc;
}
.Erste {
Breite: 100px;
Höhe: 50px;
schweben: links;
Rand rechts: 70px;
/* Hintergrundfarbe: rosa; */
Cursor: Zeiger;
Textausrichtung: zentriert;
Zeilenhöhe: 50px;
Rahmenradius: 15px;
}
.zweites li{
Breite: 80px;
Höhe: 50px;
Hintergrundfarbe: blau;
Randradius: 50 %;
Rand oben: 10px;
}
.zweite {
Anzeige: keine;
}
.erste:hover .zweite{
Anzeige: Block;
Cursor: Zeiger;
}
.erster:hover {
Hintergrundfarbe: rosa;
}
</Stil>
<Text>
<div>
<ul>
<li Klasse="Erste">
<p>Tag der ersten Ebene</p>
<ul Klasse="zweite">
<li>Tags der zweiten Ebene</li>
<li>Tags der zweiten Ebene</li>
</ul>
</li>
<li Klasse="Erste">
<p>Tag der ersten Ebene</p>
<ul Klasse="zweite">
<li>Tags der zweiten Ebene</li>
<li>Tags der zweiten Ebene</li>
</ul>
</li>
</ul>
</div>
</body>
</html>Zusammenfassen Dies ist das Ende dieses Artikels über die Implementierung eines dynamischen Sekundärmenüs mit CSS. Weitere relevante CSS-Inhalte für dynamische Sekundärmenüs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt
Artikel empfehlen
MySQL 5.7.19 neueste Binärinstallation
Laden Sie zunächst die Zip-Archivversion von der ...
Konfigurationsmethode für die Mehrfachauswahlfunktion von React Mouse
Im Allgemeinen verfügen Listen über Auswahlfunkti...
Benutzerdefinierte Docker-Netzwerkimplementierung
Inhaltsverzeichnis 1. Passen Sie das Netzwerk an,...
Vue implementiert die Countdown-Komponente für zweite Kills
In diesem Artikel wird der spezifische Code von V...
So installieren Sie Redis im Docker, legen das Kennwort fest und stellen eine Verbindung her
Redis ist ein verteilter Cache-Dienst. Caching is...
Verwenden Sie Schaltflächenauslöserereignisse, um einen blinkenden Hintergrundfarbeffekt zu erzielen
Um den blinkenden Hintergrundfarbeffekt zu erziele...
Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet
Vorwort Bei der Entwicklung kleiner Programme müs...
So beseitigen Sie den zusätzlichen Leerraum am unteren Rand der erstellten Webseite beim Surfen
Beim Erstellen von HTML-Webseiten mit Dreamweaver...
jQuery Treeview-Baumstrukturanwendung
In diesem Artikelbeispiel wird der Anwendungscode...
Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten
#String-Verkettung concat(s1,s2); verkette die St...
So importieren Sie Vue-Komponenten automatisch bei Bedarf
Inhaltsverzeichnis Globale Registrierung Teilregi...
Interviewfragen: Der Unterschied zwischen dem Holy Grail-Layout und dem Double-Wing-Layout
Vorwort Heute werde ich Ihnen ein Holy-Grail-Layo...
Detaillierte Erklärung dieser Referenz in React
Inhaltsverzeichnis Ursache: durchlaufen: 1. Konst...
Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt
1: schreibgeschützt dient zum Sperren dieses Steue...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...