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;
}