Página Parte principal:
<Body> <ul id = menu> <li> <a href =#> primeiro menu1 </a> <ul> <li> segundo menu1 </li> <li> segundo menu1-1 </li> <li> segundo menu1-2 </li> <li> MENUCO1-3 </li> </li> </li> <li> <li> <li> Menu2 </a> <ul> <li> Segundo menu2-1 </li> <li> Segundo menu2-2 </li> <li> Segundo menu2-3 </li> </li> </li> <li> Segundo menu2-3 </a> <ul> <li> Menu do segundo menu3 </a> <ul> <li> <li> Segundo menu </a> <ul> <li> <li> <li> Segundo menu3 </li> </li> <li> Segundo menu3 </a> <ul> <li> Menu do segundo nível 4-1 </li> <li> Menu do segundo nível 4-2 </li> <li> Menu do segundo nível 4-3 </li> </li> </li> <ul> <li>
Exemplo de menu dobrável:
Parte css
<head> <estilo tipo = text/css> li {estilo de lista: nenhum; Remova os gráficos anteriores da lista} li a {color:#123; Defina a cor do texto do menu de primeiro nível} #Menu ul {Display: Nenhum; Defina o menu secundário não exibido por padrão} #menu> li: hover ul {display: block; Quando o mouse desliza pelo menu de primeiro nível, o menu secundário será exibido} </style> </ad Head>Exemplo de menu de acordeão:
Parte css
<head> <estilo tipo = text/css> li {estilo de lista: nenhum; Remova a figura anterior da lista} li a {color:#123; Defina a cor do texto do menu de primeiro nível} #Menu> li,#menu> li> a,#menu> li> ul {float: esquerda; Menu de primeiro nível, menu de segundo nível de esquerda} #menu> li> a {display: block; cor de fundo; vermelho; } #menu> li: hover ul {display: block;}#menu> ul {display: nenhum; Largura: 100px; cor de fundo:#123; TOP de preenchimento: 20px;} </style> </ad Head> ResumirO exposto acima é o código de exemplo para implementar o menu dobrável e o menu de acordeão introduzido pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!
Se você acha que este artigo é útil para você, reimprimi -lo. Por favor, indique a fonte, obrigado!