Diseño de menús con CSS avanzado

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

En este tutorial voy a explicar como hacer menús con submenús como éste , o con varios niveles de submenús como éste . 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>
<li><a href='#'>Opción 3</a>
<ul>
<li><a href='#'>Subopción</a></li>

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

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

</ul>
</li>
</ul>

Ahora agregamos estas reglas de css:

<style type="text/css">
#menu
{
position: relative;
list-style-type: none;
}

#menu a
{
font-family: Arial,sans-serif;
font-size: 11pt;
color: #369;
display: block;
padding: 0.2em 0.5em;
text-align: center;
text-decoration: none;
}

#menu a:hover
{
background-color: #4487C2;
color: #FFF;
}
</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 así , lo que desplegaría esto .

Usuarios que han visto este tema también han visto...

- Menus simples con CSS y listas
- CSS: Etiquetas
- Algunos consejos que te ayudarán en CSS
- Cambiando de color las barras de scroll
- Centrar DIV horizontal en CSS

- Versión imprimible de este documento
- Enviar por e-mail este documento