[CSS][AVANZADO] Crear un menú con listas

Hola, ¿qué tal?, el siguiente post fue creado a petición de un amigo mío y se trata nada más ni nada menos que un menú sencillo en CSS fácil de adaptar y/o modificar a su gusto.

Si tienes alguna duda de los conceptos básicos del CSS puedes tomar de referencia el post anterior en donde explico como "maquillar" formularios con CSS (en este post se explican que son ids, etc).

En mi caso solo utilizaré un solo archivo HTML pero cuando se trata de una web más grande se recomienda incluír el archivo CSS con el siguiente código:

<link type="text/css" rel="stylesheet" href="directorio/tunombre.css">

En donde "directorio" equivale a en la carpeta donde tienes el CSS y "tunombre.css" lógicamente es el archivo CSS, reitero, en este caso solo utilizaré un solo archivo HTML ya que es poco contenido.
Sin nada más que decir comenzemos con el código HTML:

<div id="base">
<ul>
    <li><a href="#"></a><div class="link"><a href="#">Link 1</a></div></li>
    <li><a href="#"></a><div class="link"><a href="#">Link 2</a></div></li>
    <li><a href="#"></a><div class="link"><a href="#">Link 3</a></div></li>
    <li><a href="#"></a><div class="link"><a href="#">Link 4</a></div></li>
    <li><a href="#"></a><div class="link"><a href="#">Link 5</a></div></li>
</ul>
</div>

Como podran notar estoy utilizando listas para de esta maner facilitarnos mucho más a la hora de crear algún menú, dentro de una capa con el identificador base ponemos la lista la cual a su vez contiene un link y otra capa más con el identificador link, recuerden que para manejar id en CSS utilizamos "#" y para manejar clases utilizamos ".". Pasemos al código CSS:

#base{ //Hacemos referencia al id Base el cual sera la base del menu
width: 800px; //Ancho
margin: 0 auto; //Margen
height: 50; //Alto
background: #004E00; //Fondo
font-family: "Trebuchet MS", Verdana; //Fuente de letra
font-size: 18px; //Tamaño de letra
font-weight: bold; //Negrita/strong
-moz-border-radius-bottomleft:10px; //Borde redondeado aba-izq
-moz-border-radius-bottomright:10px; //Borde redondeado aba-der
-moz-border-radius-topleft:10px; //Borde redondeado arr-izq
-moz-border-radius-topright:10px; //Borde redondeado arr-der
text-shadow: #000000 1px 1px 1px; //Sombra de texto
}
#base ul{//Hacemos referencia a la lista desordenada
margin: 0; //Margen
padding: 0; //Separacion
}
#base ul li:hover{//Hacemos referencia al elemento de la lista y al indicar hover estamos declarando qeu al pasar el mouse sobre este cambiara su estilo
background: #B8CA01; //Fondo
height: 100%; //Alto
-moz-border-radius-bottomleft:10px; //Borde redondeado aba-izq
-moz-border-radius-bottomright:10px; //Borde redondeado aba-der
-moz-border-radius-topleft:10px; //Borde redondeado arr-izq
-moz-border-radius-topright:10px; //Borde redondeado arr-der
}
#base ul li a{//Hacemos referencia a los links dentro de la lista desordenada
text-decoration:none; //Decoracion
padding-top: 15px; //Separacion
color: #FFFFFF; //Color
}
#base ul, li{ //Hacemos referencia a la lista desordenada y a los elementos dentro de esta
list-style:none; //Estilo de lista
}
#base ul li{ //Hacemos referencia a los elementos de la lista desordenada
float:left; //Situar
width: 20%; //Ancho
text-align:center; //Alineacion del texto
}
#base .link{ //Indicamos la clase link
padding-top:13px; //Separacion
}

Ahora les explicaré un poco más detalladamente que es lo que hago en términos prácticos:

Abro una capa con id base el cual me servirá como base del menú, dentro de este situo la lista desordenada con sus respectivos elementos y mediante CSS les quito su valor predeterminado para que aparezcan en forma horizontal en vez de forma vertical y les indico un ancho de 20% a c/u, dentro de esos elementos pongo un atributo a con su respectiva capa con la clase link, con CSS cambio los valores predeterminados del atributo a los cuales son los famosos "links" y la capa con la clase link la creo para poder separar el borde del contenido y que éste se centre.

Realmente es un código muy sencillo ya que al ser código CSS la página cargará mucho más rápido y en cuestión de segundos se puede modificar el diseño, cabe mencionar que en los backgrounds en vez de utilizar el color puedes utilizar alguna imagen para darle un toque más personal.

Acá les dejo un demo: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Acá descargar ejemplo: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Nota: El resaltador de código no me muestra correctamente la parte del HTML, les recomiendo ir al demo y ver el código fuente.

Saludos.