En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.
Comencemos….
1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.
<div class=»contenedorMenu»>
<ul class=»menu»>
<li><a href=»#inicio»>Inicio</a></li>
<li><a href=»#seccion1″>Sección 1</a></li>
<li><a href=»#seccion2″>Sección 2</a>
<!– este es el submenu –>
<ul class=»submenu»>
<li><a href=»#Subseccion1″>SubSeccion1</a></li>
<li><a href=»#Subseccion2″>SubSeccion2</a></li>
<li><a href=»#Subseccion3″>SubSeccion3</a></li>
</ul>
<!– Termina el submenu –>
</li>
<li><a href=»#seccion3″>Sección 3</a></li>
</ul>
</div>
2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.
/*Estilos para submenu UL*/
.submenu
{
display:none; /*No mostrar*/
}
/*Estilos para los SubmenuItems */
.submenu li
{
background: #a921A6; /*Color de fondo para el menu*/
width:140px; /*Establecer el ancho de cada item*/
text-align:center; /*centrar contenido en texto*/
}
3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.
/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
.menu li:hover > .submenu
{
display: inline-block; /*Mostrar submenu*/
}
Ahora, tenemos un menú parecido a este:
En el siguiente post veremos como hacer un sticky menú
Gracias
Experiencias de Desarrollo Web 