Este artigo apresenta exemplos da segunda barra de menus de nível que usa HTML+CSS para implementar o mouse.
Primeiro do desenho de efeito:
1. O mouse não está acima
2. Coloque o mouse no primeiro menu de nível e expanda o menu secundário
3. Coloque o mouse no menu secundário
Código:
<html> <head> <title> Teste de menu de segundo nível </ititle> <meta charset = utf-8> <tipo de estilo = text/css>/*para fazer o menu no meio*/corpo {preenchimento -top: 100px; -------------------------------------------------------- -------------------------------------------------------- -------------------------------------------------------- ------------------------ * / .Menudiv {Border: 2px Solid #Aac; a linha download de uma tags* / .Menudiv a {Text-decics: Nenhum;} /* Defina o estilo UL e Li* /. Float: Esquerda;} /* Defina o menu de segundo nível Posicionamento absoluto e ocultar* /.Menudiv> ul> ul {Posição: Absolutee; /.menudiv> li> ul> li {float: Nenhum;} /* Mouse colocado no primeiro menu de nível, exibindo o menu secundário* /.menudiv> ul> li: Hover ul {Display: Block;} /* 1 1 Menu de nível* / .Menudiv> Li> A {Lidra: 120px; } /* No menu de primeiro nível, a primeira caixa esquerda* /.menudiv> li: primeiro filho> a {border-herd: Nenhum;} /* No menu de primeira classe, o estilo do mouse colocado* /.menudiv> ul> li> a: hover {color: #f0f; Altura de linha: 36px; Configuração do painel superior* / .menudiv> li> li: primeiro filho> a {border-top: 1px Solid #ccc;} /* No menu secundário, o estilo do mouse é colocado* / .menudiv> ul > li> li> a: hover {color: #a4f; -- Fim ----------------------------------------------- -------------------------------------------------------- ------ Body> <! --------- Menu HTML Código ------------------------- class = menudiv> <ul> <li> <a href =#> menu um </a> <ul> <li> <a href =#> menu de dois níveis </a> </li> <a href = #> Menu secundário </a> </li> <li> <a href =#> segundo -Menu de nível </a> </li> </ul> </li> <li> <a href =#> Menu dois </a> <ul> <li> <a href =#> Segundo -Menu de nível </a> </li> <li> <a href =#> menu de dois níveis </a> </i li > </li> <li> <li> <a href =#> menu três </a> <ul> <li> <a href =#> menu secundário </a> </li> <a href =# > menu secundário </a> </li> <li> <a href =#> Segundo -Menu de nível </a> </li> <li> <a href =#> menu secundário </a> </i li > <li> <a href =#> Segundo -Menu de nível </a> </li> </ul> </li> <li> <a href =#> menu 4 </a> </li> < a href =#> menu cinco </a> <ul> <li> <a href =#> segundo menu </a> </li> <li> <a href =#> segundo menu </a> li> <li> <a href =#> ii menu </a> </li> </ul> </li> </ul> </div> <! ------------- --- -------- END -----------> </body> </html>O acima é todo o conteúdo deste artigo.