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> .

2 3 list-style:none. . 5 padding:0. } 10 11 . 13 color:#FFF.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. text-decoration:none. 4 margin:0. 6 } 7 8 .nav li a { 12 background:#0c9ba0.

27position:absolute.nav li ul { 26display:none. 20 21 22 23 } En la linea 9. 28min-width:140px. } 19 background:#0fbfc6. se especifica que solo los li que sean descendientes directos del primer ul tengan float: left. los ocultaremos usando display: none. 16 17 18 .14display:block. 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. 29} .nav li a:hover { padding:10px 12px. 25. 15border:1px solid.

Proseguimos con la parte que hara que se muestre el submenu oculto: 31. 33} En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: block). El problema ahora es que los submenús de segundo nivel en adelante se están mostrando pero no como deberían: .nav li:hover > ul { 32display:block.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.

Recuerda que puedes ver el resultado final en este enlace y/o descargar el código fuente desde aquí. 37} 38 39.nav li ul li { 36position:relative. para empujarlos hacia la derecha. 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. es importante notar que este valor es el mismo que el que definimos anteriormente como ancho mínimo. 41top:0.nav li ul li ul { 40right:-140px. . 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 . } 42 Los submenús de segundo nivel tendran right: -140px.

Sign up to vote on this title
UsefulNot useful