Este artículo presenta ejemplos de la barra de menú de segundo nivel que usa HTML+CSS para implementar el mouse.
Primero del dibujo del efecto:
1. El mouse no está arriba
2. Coloque el mouse en el menú de primer nivel y expanda el menú secundario
3. Pon el mouse en el menú secundario
Código:
<html> <cead> <title> Prueba de menú de segundo nivel </title> <meta charset = utf-8> <style type = text/css>/*para hacer el menú en el medio*/cuerpo {relleno -Top: 100px; -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------- * / .Menudiv {Border: 2px Solid #AAC; La línea descendente de una etiqueta* / .Menudiv a {Text-Decics: Ninguno;} /* Establecer estilo UL y Li* / .men Udiv ul,. flotante: izquierda;} /* Establezca el menú de segundo nivel posicionamiento absoluto y esconder* /.menudiv> ul> ul {posición: absoluta; /.menudiv> li> ul> li {float: none;} /* mouse colocado en el menú de nivel de nivel, mostrando el menú secundario* /.Menudiv> ul> li: hover ul {display: block;} /* 1 -La Menú* /. } /* En el menú de primer nivel, el primer cuadro izquierdo* /.menudiv> li: First-Child> A {Border-Hered: Ninguno;} /* En el menú de primera clase, el estilo del mouse colocado* /.menudiv> ul> li> a: hover {color: #f0f; Línea-Hie: 36px; Configuración del bisel superior* / .Menudiv> li> li: First-Child> A {border-top: 1px sólido #ccc;} /* En el menú secundario, el estilo del mouse se coloca* / .menudiv> ul > li> li> a: hover {color: #a4f; -- Fin ----------------------------------------------- -------------------------------------------------- ------ Cuerpo> <! --------- Menú Código HTML ------------------------- <Div class = Menudiv> <ul> <li> <a href =#> menú one </a> <ul> <li> <a href =#> Menú de dos niveles </a> </li> <a href = #> Menú secundario </a> </li> <li> <a href =#> segundo menú de nivel </a> </li> </ul> </li> <li> <a href =#> Menú dos </a> <ul> <li> <a href =#> segundo menú de nivel </a> </li> <li> <a href =#> Menú de dos niveles </a> </li > </li> <li> <li> <a href =#> menú tres </a> <ul> <li> <a href =#> menú secundario </a> </li> <a href =# > Menú secundario </a> </li> <li> <a href =#> segundo menú de nivel </a> </li> <li> <a href =#> menú secundario </a> </li > <li> <a href =#> segundo menú de nivel </a> </li> </ul> </li> <li> <a href =#> menú 4 </a> </li> < un href =#> menú cinco </a> <ul> <li> <a href =#> segundo menú </a> </li> <li> <a href =#> segundo menú </a> </// li> <li> <a href =#> ii menú </a> </li> </ul> </li> </ul> </div> <! --- -------- Fin -----------> </body> </html>Lo anterior es todo el contenido de este artículo.