Menú con listas
Utilizando CSS

Los diseñadores suelen hacer mucho los menús de sus sitios web utilizando tablas, esto no es que sea una mala práctica pero puede simplificarse si usamos listas ya que tendremos más control de nuestro menú. Veamos un ejemplo completo, primero tenemos toda la lista en HTML:

<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Videotutoriales</a></li>
<li><a href="#">Contactenos</a></li>
</ul>

Luego viene el código CSS, lo primero que vamos a hacer es quitarle el estilo a la lista y las margenes:

[highlight=css].menu {
margin: 0px;
padding: 0px;
list-style: none;[/highlight]

Luego vamos a pasar cada "li" a la izquierda, es decir de tal forma que podamos ver la lista verticalmente, y adicionalmente le agregamos margen de 1px:

[highlight=css].menu li {
margin: 1px;
float: left;[/highlight]
}

Ahora vamos a modificar los enlaces, así que como el código es un poco largo vamos a comentar cada línea:

[highlight=css].menu li a {
display: block; //El elemento se comportará como bloque
width: 110px; //Ancho de 110px
height: 22px; //Alto de 22px
background-color: #33CCFF; // Color de fondo
color: white; // Color del texto
text-decoration: none; // quitarle el estilo a los enlaces (es decir el subrayado de abajo)
text-align: center; // alineamos el texto
font-family: arial, helvetica, sans-serif; // declaramos un conjunto de fuentes
font-size: 13px; // le damos un tamaño a la fuente
border-left: 10px solid #CCCCCC; // le ponemos un borde de 1px de color gris aunque no es necesario
}[/highlight]

Lo que muchos se preguntan es como hacer para que cuando el cursor se pase sobre el botón este cambie de color, pues eso es sencillo con la propiedad hover del link:

[highlight=css].menu li a:hover {
background-color: #33FFFF;
}[/highlight]