Como hacer un menú desplegable multinivel usando solo CSS

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

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

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

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

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