Como hacer un menú desplegable multinivel usando solo CSS

En este tutorial aprenderemos a hacer un sencillo menú desplegable con soporte para infinitos niveles usando HTML y CSS.

Estructura HTML
Trabajaremos con una lista con clase de “nav”, que almacenara los items del menú:
1 2 3
<head> <!DOCTYPE HTML> <html>

4 5

<title>Menu desplegable usando solo CSS</title> <link rel="stylesheet" href="estilos.css" />

6 </head> 7 <body> 8 <ul class="nav"> 9 10 11 12
</ul> <li><a href="">Home</a></li> <li><a href="">Servicios</a></li> <li><a href="">Acerca</a></li> <li><a href="">Contacto</a></li>

13 14 15

</body> </html>

Los submenús se desplegaran cuando el usuario pase el cursor, estos iran como listas dentro de listas(ul > li > ul). Este ejemplo funcionara con cualquier cantidad de submenús, eso quiere decir que puedes incluir los niveles de menús que quieras, en este caso tendremos 3 niveles:
8 <ul class="nav"> 9
<li><a href="">Home</a></li>

10 11 12 13 14 <li><a href="">Servicios</a> <ul> <li><a href="">Diseno grafico</a></li> <li><a href="">Diseno web</a> <ul> <li><a href="">Submenu 1</a></li> 15 16 17 18 19 20 21 22 23 <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> <li><a href="">Submenu 5</a></li> </ul> </li> <li><a href="">Marketing</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> 24 25 26 27 28 29 30 31 32 33 <li><a href="">Submenu 3</a> <ul> <li><a href="">Submenu 1</a></li> <li><a href="">Submenu 2</a></li> <li><a href="">Submenu 3</a></li> <li><a href="">Submenu 4</a></li> </ul> </li> </ul> </li> <li><a href="">SEO</a></li> 34 35 36 </ul> </li> <li><a href="">Acerca</a> .

. } 10 11 . 4 margin:0. 6 } 7 8 . 13 color:#FFF. 2 3 list-style:none.nav li a { 12 background:#0c9ba0. 5 padding:0. text-decoration:none.37 38 39 40 41 <ul> <li><a href="">Historia</a></li> <li><a href="">Mision</a></li> <li><a href="">Vision</a></li> </ul> </li> 42 43 44 45 46 47 <li><a href="">Contacto</a></li> </ul> Código CSS Empezaremos con un reset basico y algo de decoración para el menu: * { 1 font-family:sans-serif.nav > li { 9 float:left.

los ocultaremos usando display: none.nav li ul { 26display:none. esto es para que solo el menu principal sea horizontal y los submenús se mantengan en vertical: Por defecto todos los submenús no serán visibles.14display:block. se especifica que solo los li que sean descendientes directos del primer ul tengan float: left.nav li a:hover { padding:10px 12px. 27position:absolute. 28min-width:140px. } 19 background:#0fbfc6. 16 17 18 . 20 21 22 23 } En la linea 9. 25. 29} . 15border:1px solid.

Proseguimos con la parte que hara que se muestre el submenu oculto: 31.nav li:hover > ul { 32display:block. El problema ahora es que los submenús de segundo nivel en adelante se están mostrando pero no como deberían: .Todos los submenús tendrán un ancho minimo de 140px para que no se vean desiguales y llevaran position: absolute para que no afecten el ancho del menu principal. 33} En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block).

. Esto afectara todos los submenús de segundo nivel en adelante: Conclusión Este ejemplo esta probado en todos los navegadores incluyendo Internet Explorer(IE7+). y ademas tendra top: 0 esto es para que se posicione al mismo nivel que su ancestro li que tiene position: relative. cabe notar que este ejemplo tiene ciertas limitaciones como la de mostrar un indicador en los menús que tienen submenús. } 42 Los submenús de segundo nivel tendran right: -140px.nav li ul li ul { 40right:-140px.nav li ul li { 36position:relative. es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mínimo. Recuerda que puedes ver el resultado final en este enlace y/o descargar el código fuente desde aquí. 37} 38 39. 41top:0. para empujarlos hacia la derecha. sin embargo es una buena alternativa para cuando necesitamos crear un menu desplegable lo mas rapido posible.Lo que tenemos que hacer es que estos se muestren a la derecha de su respectivo ancestro li: 35 .

Sign up to vote on this title
UsefulNot useful