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

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

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

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. Proseguimos con la parte que hara que se muestre el submenu oculto: 31.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.

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