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