Cet article présente des exemples de la barre de menu de niveau deuxième qui utilise HTML + CSS pour implémenter la souris.
Premier du dessin de l'effet:
1. La souris n'est pas au-dessus
2. Mettez la souris dans le menu de premier niveau et développez le menu secondaire
3. Mettez la souris sur le menu secondaire
Code:
<html> <éad- head> <ititle> Test de menu de deuxième niveau </ title> <meta charset = utf-8> <style type = text / css> / * afin de fabriquer le menu au milieu * / corps {padding -Top: 100px; texte -rign: Centre;} / * ------------------------------------ -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ------------------------ * / .Menudiv {Border: 2px Solid #Aac; La descente d'une balise * / .Menudiv a {Text-Decics: Aucun;} / * set ul et li style * / .men udiv ul, .Menudiv li {list-style: Aucun; margin: 0; float: gauche;} / * Définissez le menu de deuxième niveau Positionnement absolu, et masque * / .Menudiv> ul> ul {position: Absolutee; /.Menudiv> li> ul> li {float: Aucun;} / * souris placée sur le menu de premier niveau, affichant le menu secondaire * / .ménudiv> ul> li: hover ul {affichage: bloc;} / * 1 -La menu de niveau * / .Menudiv> li> une largeur: 120px; } / * Dans le menu de premier niveau, la première boîte de gauche * / .Menudiv> li: Premier enfant> a {Border-Hered: Aucun;} / * Dans le menu de première classe, le style de la souris placé * /.Menudiv> ul> li> a: hover {couleur: # f0f; HEURS DE LIGNE: 36PX; Couleur: # 456; Réglage de la lunette supérieure * / .Menudiv> li> li: premier-enfant> a {border-top: 1px solide #ccc;} / * Dans le menu secondaire, le style de la souris est placé * / .Menudiv> ul > li> li> a: hover {couleur: # a4f; -- Fin ----------------------------------------------- -------------------------------------------------- ------ Body> <! classe = menudiv> <ul> <li> <a href = #> menu un </a> <ul> <li> <a href = #> Menu de deux niveaux </a> </li> <a href = #> Menu secondaire </a> </li> <li> <a href = #> menu de niveau secondaire </a> </li> </ul> </li> <li> <a href = #> Menu deux </a> <ul> <li> <a href = #> menu de niveau secondaire </a> </li> <li> <a href = #> Menu à deux niveaux </a> </li > </li> <li> <li> <a href = #> menu trois </a> <ul> <li> <a href = #> menu secondaire </a> </li> <a href = # > Menu secondaire </a> </li> <li> <a href = #> menu de niveau secondaire </a> </li> <li> <a href = #> menu secondaire </a> </li > <li> <a href = #> menu de niveau secondaire </a> </li> </ul> </li> <li> <a href = #> menu 4 </a> </li> < un href = #> menu cinq </a> <ul> <li> <a href = #> Deuxième menu </a> </li> <li> <a href = #> Deuxième menu </a> </ li> <li> <a href = #> ii menu </a> </li> </ul> </li> </ul> </div> <! --- -------- fin -----------> </ body> </html>Ce qui précède est tout le contenu de cet article.