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

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

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

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. 33} En este código le estamos indicando que cuando el cursor pase sobre cualquier li su descendiente ul se muestre(display: 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. Proseguimos con la parte que hara que se muestre el submenu oculto: 31.

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

Sign up to vote on this title
UsefulNot useful