Diseño de menús con CSS - Avanzado - Diseño de menús con CSS - Avanzado (1)

En este tutorial voy a explicar como hacer menús con submenús como , o con varios niveles de submenús como . A nivel de html, las opciones principales del menú son items de una lista desordenada (unordered list), y los submenús son a su vez listas desordenadas.

---

Vamos primero a escribir el html sin las reglas de css. Siguiendo el ejemplo mostrado, el html sería el siguiente, lo que desplegaría esto. Si analizan detenidamente el código html verán que todo el menú está dentro de una lista <ul>, y cada opción principal es un list item <li>, el cual a su vez contiene otra lista <ul> con las subopciones, y así sucesivamente. La clave está en que la lista <ul> correspondiente a un submenú debe de estar dentro de un list item <li>, es decir, los tags <ul> ... </ul> de la lista que corresponden a un submenú deben de estar antes del tag que cierra el list item </li> de la opción:
<ul>

• lt;li><a href='#'>Opción 3</a>
  • lt;ul>
    • lt;li><a href='#'>Subopción</a></li>

• • • lt;li><a href='#'>Subopción</a>
      • lt;ul>
        • lt;li><a href='#'>Algo más</a></li>
        • lt;li><a href='#'>Algo más</a></li>

• • • • lt;/ul>
    • lt;/li>
    • lt;li><a href='#'>Subopción</a></li>
    • lt;li><a href='#'>Subopción</a></li>

• • lt;/ul>
• lt;/li>

</ul>


Ahora agregamos estas reglas de css:

<style type="text/css">
#menu
{
}

#menu a
{
}

#menu a:hover
{
}
</style>


Estamos definiendo el id menu que asignaremos a la lista principal que contiene todas las opciones y demás submenús. Especificamos que los items no tengan viñetas u otro estilo (list-style-type:none), y en la pseudo-clase hover definimos que cambie el color del fondo y de letra. También hay que resaltar que en el selector a estamos especificando la propiedad display (si quieren saber más de esta propiedad revisen la documentación de css haciendo click en esta liga). Juntando este código, y siguiendo con nuestro ejemplo, el código html quedaría , lo que desplegaría esto.

---

Ya se ve un poco mejor, sin embargo los items de todas las listas están desplegados de manera vertical (que es el default). Lo que haremos ahora será especificar que los items de la lista del menú principal se desplieguen de manera horizontal. Esto lo haremos definiendo una clase que llamaremos menuitem y algunos ids que serán en los que especificaremos la posición absoluta en la que queremos que se despliegue cada una de las opciones del menú principal:
/* Comienza clase .menuitem */

.menuitem
{
}

.menuitem ul
{
}

.menuitem:hover { overflow: visible; }
/* termina clase .menuitem */

/* Comienza posicion horizontal de cada opcion del menu principal */
#m1 { left: 0; }
#m2 { left: 9.95em; }
#m3 { left: 19.85em; }
#m4 { left: 29.80em; }
#m5 { left: 39.75em; }
/* termina posicion horizontal de cada opcion del menu principal */