Crear un menú vertical sencillo utilizando listas en 4 pasos

Las listas HTML se suelen emplear, además de para su función natural, para la creación de menús de navegación verticales y horizontales.

A continuación se muestra la transformación de una lista sencilla de enlaces en un menú vertical de navegación.

Se partirá del siguiente código HTML:

<ul>
<li><a href="#" title="Enlace genérico">Elemento 1</a></li>
<li><a href="#" title="Enlace genérico">Elemento 2</a></li>
<li><a href="#" title="Enlace genérico">Elemento 3</a></li>
<li><a href="#" title="Enlace genérico">Elemento 4</a></li>
<li><a href="#" title="Enlace genérico">Elemento 5</a></li>
<li><a href="#" title="Enlace genérico">Elemento 6</a></li>
</ul>

El resultado final será como el siguiente:

1.- Definir la anchura

El primer paso consistirá en establecer una anchura para el menú (en este caso la lista). A modo de ejemplo se le dará un width de 180px. Los elementos contenidos dentro de ul (es decir, cada uno de los li) heredarán la propiedad.

ul.menu { width: 180px; }

El resultado será el siguiente:

2.- Eliminar estilos y viñetas por defecto

El paso 2 consiste en eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto:

ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;

}

El resultado será el siguiente:

3.- Bordes y fondos

Posteriormente deberá añadirse un borde al menú de navegación y establecerse el color de fondo. Además, se definirán los bordes de cada elemento del menú:

ul.menu {
width: 180px;
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #7C7C7C;
border-bottom: none;

}
ul.menu li {
border-bottom: 1px solid #7C7C7C;
border-top: 1px solid #FFF;

background: #F4F4F4;
}

Llegados a este punto, el resultado será el siguiente:

4.- Aplicar estilos

Únicamente quedará aplicar estilos a los enlaces: deberán mostrarse como elementos de bloque (por defecto son elementos inline) para que ocupen todo el espacio de cada <li>. Además se les añadirá un relleno y se les modificará los colores y decoración por defecto:

ul.menu li a {
padding: .2em 0 .2em .5em;
display: block;
text-decoration: none;
color: #333;

}

REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO