Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus
|
Dieser Artikel stellt ein Beispiel für die Verwendung von HTML+CSS vor, um eine sekundäre Menüleiste zu implementieren, wenn die Maus bewegt wird. Die Details sind wie folgt: Zunächst das Effektbild: 1. Die Maus ist nicht drauf
2. Platzieren Sie die Maus auf dem Menü der ersten Ebene, um das Menü der zweiten Ebene zu erweitern
3. Platzieren Sie die Maus auf dem sekundären Menü
Code:
<html>
<Kopf>
<title>Test des sekundären Menüs</title>
<meta charset="utf-8">
<style type="text/css">
/*Um das Menü zu zentrieren*/
Körper {
Polsterung oben: 100px;
Textausrichtung: zentriert;
}
/* -------------Menü-CSS-Code----------Beginn---------- */
.menuDiv {
Rand: 2px durchgezogen #aac;
Überlauf: versteckt;
Anzeige: Inline-Block;
}
/* Unterstreichung des a-Tags entfernen*/
.menuDiv ein {
Textdekoration: keine;
}
/* Den Stil von ul und li festlegen */
.menuDiv ul , .menuDiv li {
Listenstil: keiner;
Rand: 0;
Polsterung: 0;
schweben: links;
}
/* Sekundäres Menü auf absolute Positionierung setzen und ausblenden*/
.menuDiv > ul > li > ul {
Position: absolut;
Anzeige: keine;
}
/* Legt den Stil des li des sekundären Menüs fest */
.menuDiv > ul > li > ul > li {
Schwimmer: keiner;
}
/* Bewegen Sie die Maus über das Menü der ersten Ebene, um das Menü der zweiten Ebene anzuzeigen*/
.menuDiv > ul > li:hover ul {
Anzeige: Block;
}
/* Menü der ersten Ebene */
.menuDiv > ul > li > a {
Breite: 120px;
Zeilenhöhe: 40px;
Farbe: Schwarz;
Hintergrundfarbe: #cfe;
Textausrichtung: zentriert;
Rahmen links: 1px durchgezogen #bbf;
Anzeige: Block;
}
/* Im Menü der ersten Ebene den linken Rand nicht festlegen */
.menuDiv > ul > li:erstes-Kind > a {
Rand links: keiner;
}
/* Im Menü der ersten Ebene der Stil der Maus darüber*/
.menuDiv > ul > li > a:hover {
Farbe: #f0f;
Hintergrundfarbe: #bcf;
}
/* Sekundäres Menü */
.menuDiv > ul > li > ul > li > a {
Breite: 120px;
Zeilenhöhe: 36px;
Farbe: #456;
Hintergrundfarbe: #eff;
Textausrichtung: zentriert;
Rand: 1px durchgezogen #ccc;
oberer Rand: keiner;
Anzeige: Block;
}
/* Im sekundären Menü legt das erste die obere Grenze fest*/
.menuDiv > ul > li > ul > li:erstes-Kind > a {
Rahmen oben: 1px durchgezogen #ccc;
}
/* Im sekundären Menü der Stil der Maus darüber*/
.menuDiv > ul > li > ul > li > a:hover {
Farbe: #a4f;
Hintergrundfarbe: #cdf;
}
/* -------------Menü-CSS-Code----------Ende---------- */
</Stil>
</Kopf>
<Text>
<!-- -------Menü-HTML-Code---------Beginn---------- -->
<div Klasse="MenüDiv">
<ul>
<li>
<a href="#">Menü 1</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
<li>
<a href="#">Menü 2</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
<li>
<a href="#">Menü Drei</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
<li>
<a href="#">Menü 4</a>
</li>
<li>
<a href="#">Menü Fünf</a>
<ul>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
<li><a href="#">Sekundäres Menü</a></li>
</ul>
</li>
</ul>
</div>
<!-- -------Menü-HTML-Code---------Ende------- -->
</body>
</html>
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. |
<<: So verwenden Sie Nginx als Proxy-Cache
>>: CSS imitiert den sanften Umschalttasteneffekt von Apple
Artikel empfehlen
Ein vollständiges Tutorial zur Installation von Ubuntu 20.04 mit einer virtuellen VMware-Maschine
Ubuntu ist ein relativ beliebtes Linux-Desktopsys...
Erweiterte MySQL-Funktionen - detaillierte Erläuterung des Konzepts und des Mechanismus der Datentabellenpartitionierung
Inhaltsverzeichnis Partitionierungsmechanismus SE...
Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren
In diesem Artikel wird der spezifische Code zur I...
So verwenden Sie Zeit als Beurteilungsbedingung in MySQL
Hintergrund: Während des Entwicklungsprozesses mü...
Verwenden von VMware IOInsight zur Durchführung einer verfeinerten Überwachung der Speicherleistung virtueller Maschinen
veranschaulichen: VMware IOInsight ist ein Tool, ...
Lösung für das Problem, dass nach einem Neustart von Ubuntu in VMWare kein Zugriff auf das Internet möglich ist
So lösen Sie das Problem, dass nach dem Neustart ...
Detaillierte Erläuterung des Beispielcodes für das elastische CSS3 Flex-Layout
1. Grundlegende Konzepte //Jeder Container kann a...
Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images
Die erste Lösung besteht darin, das Bild in ein ö...
Grundkenntnisse zu MySQL – Lernhinweise
Datenbank anzeigen show databases; Erstellen eine...
Detaillierte Erläuterung der SSHD-Dienste und Dienstverwaltungsbefehle unter Linux
sshd SSH ist die Abkürzung für Secure Shell, ein ...
Automatisierter Docker-Build – Diagramm des Implementierungsprozesses für automatisierte Builds
Automatisierter Build bedeutet, Docker Hub zu ver...
Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.
Nachdem Sie –subnet zum Erstellen des Docker-Netz...
HTML+CSS+JavaScript, um eine Rubbellosversion für die Freundin zu erstellen (Sie werden es lernen, sobald Sie es sehen)
Ich glaube, jeder hat schon einmal Rubbellose ges...
Javascript zum Wechseln von Bildern per Mausklick
In diesem Artikelbeispiel wird der spezifische Ja...
So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten
Manche Webseiten erscheinen möglicherweise nicht ...