Creacion basica de menus con CSS

Crearemos un menú vertical básico, pero vistoso, con el uso de HTML y CSS; haciendo uso de las listas desordenadas.
<ul>…</ul>

1) Primero crearemos el listado de opciones que tendrá nuestro menú, este listado deberá estar dentro de un div al cual llamaremos “menu”.

<div>
<ul>
  <li>Opción 1</li>
  <li>Opción 2</li>
  <li>Opción 3</li>
  <li>Opción 4</li>
  <li>Opción 5</li>
  <li>Opción 6</li>
  </ul>
</div>

2) Ahora agregaremos una etiqueta de hipervinculo a cada elemento de la lista, utilizando las etiquetas <a>…</a>

<div>
<ul>
  <li><a href=”#”>Opción 1</a></li>
  <li><a href=”#”>Opción 2</a></li>
  <li><a href=”#”>Opción 3</a></li>
  <li><a href=”#”>Opción 4</a></li>
  <li><a href=”#”>Opción 5</a></li>
  <li><a href=”#”>Opción 6</a></li>
  </ul>
</div>

3) Guardaremos nuestro archivo con el nombre de”menú.html”.

4) Ahora agregaremos el código CSS para darle el estilo al menú. Podemos hacerlo de dos formas:
a. Si tienes un poco de conocimiento previo de css y html, puedes crear una hoja de estilo independiente y vincularla a el archivo html.
b. En caso de no tener muchos conocimientos de css y html, haremos lo que sigue:
Antes del cierre de la etiqueta </head>, escribiremos:

<style type="text/css">
            Aquí ira el código css
</style>

5) Escribiremos el siguiente código CSS

.menu{
border: 1px solid #C0C0C0; /*Aqui indicamos el borde que tendra el menú y su color*/
background-color: white; /*color de fondo*/
border-bottom-width: 0; /*Quitamos el borde inferior*/
width: 150px; /*Ancho del menu*/
}

.menu ul{
padding: 0;
margin: 0;
list-style-type: none; /*quitamos el icono de lista*/
}

.menu a{ /*indicamos el estilo de los vinculos*/
font: bold 14px Verdana; /*tipo, tamaño y estilo de letra*/
padding: 4px 3px; /*Espacio interno superior e izquierdo*/
display: block; /*forma en que se presenta el vinculo (bloque)*/
width: 100%; /*Definimos el ancho para evitar problemas con IE6*/
color:#036; /*color del texto*/
text-decoration: none; /*quitamos el subrayado de los vinculos*/
border-bottom: 1px solid #C0C0C0; /*agregamos un borde inferior con color*/
}

.menu a:visited{
color: #036; /*cambiamos el color del texto a los vinculos visitados*/
}

html>body .menu a{
width: auto; /*indicamos un ancho automático de los vínculos según su tamaño*/
}

.menu a:hover{ /*cambiamos color de fondo y texto al pasar el mouse sobre el vinculo*/
background-color: #000;
color: #F90;
}

6) Guardamos los cambios.