In diesem Artikel wird Beispiele für die zweite Menüleiste vorgenommen, die HTML+CSS zum Implementieren der Maus verwenden.
Erstens der Effektzeichnung:
1. Die Maus ist nicht oben
2. Setzen Sie die Maus auf das erste Menü -Level -Menü und erweitern Sie das sekundäre Menü
3. Setzen Sie die Maus auf das sekundäre Menü
Code:
<html> <kopf> <titels> Menü-Test der zweiten Ebene </title> <meta charset = utf-8> <style type = text/css>/*Um das Menü in der Mitte*/body {padding zu erstellen -Top: 100px; -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------------------------ * / .menudiv {Border: 2PX Solid #Aac; Die Downline von A-Tags* / .menudiv a {text-dezik Float: Links;} /* Setzen Sie das Menü zweiter Ebene. /.Menudiv> li> ul> li {float: keine;} /* Maus, die im ersten Menü -Level -Menü platziert ist und das sekundäre Menü anzeigt -Level-Menü* / .menudiv> li> {width: 120px; } /* Im Menü erster Stufe, das erste linke Feld* /.menudiv> li: Erst-Kind> A {Bordered: None;} /* Im erstklassigen Menü der Stil der Maus* /.Menudiv> ul> li> a: hover {color: #f0f; Linienhöhe: 36px; Einstellung der oberen Lünette* / .menudiv> li> li: First-Kind> A {Border-Top: 1PX Solid #CCC;} /* Im sekundären Menü wird der Stil der Maus platziert* / .menudiv> ul > li> li> a: hover {color: #a4f; -- Ende ----------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ------ Body> <! class = menudiv> <ul> <li> <a href =#> Menü eins </a> <ul> <li> <a href =#> Zwei -Level -Menü </a> </li> <a href = #> sekundäres Menü </a> </li> <li> <a href =#> Second -Level -Menü </a> </li> </ul> </li> <li> <a href =#> Menü zwei </a> <ul> <li> <a href =#> Second -Level -Menü </a> </li> <li> <a href =#> Zwei -Level -Menü </a> </li > </li> <li> <li> <a href =#> Menü Drei </a> <ul> <li> <a href =#> sekundäres Menü </a> </li> <a href =## > Sekundäres Menü </a> </li> <li> <a href =#> Second -Level -Menü </a> </li> <li> <a href =#> sekundäres Menü </a> </li > <li> <a href =#> Second -Level -Menü </a> </li> </ul> </li> <li> <a href =#> Menü 4 </a> </li> < a href =#> Menü fünf </a> <ul> <li> <a href =#> Zweites Menü </a> </li> <li> <a href =#> Zweites Menü </a> </</</ li> <li> <a href =#> II-Menü </a> </li> </ul> </li> </ul> </div> <! --- -------- Ende -----------> </body> </html>Das oben genannte ist der Inhalt dieses Artikels.