En esta guía muestro como hacer un menu horizontal simple desde 0. Explico los códigos detalladamente para que no queden dudas y espero que les sirva.
Comenzemos! Por favor tomen asiento.

Vista previa final del menú:

 

Algo que creo que muchos no se dan cuenta es que un menú comienza con lo que en HTML se llama lista y se define así:

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

Uffff… Muy complicado! xD

 

Ahora, ¿cómo hacer para que esa lista se transforme en un menú horizontal? La respuesta: CSS

Lo primero que se debe hacer es darle un valor a la lista para aplciarle estilos CSS que en cuyo caso sería “menu”. Entonces ahora aplicaremos estilos CSS a este selector.

<ul id=”menu”>
<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>

 

Explicare en forma de comentarios CSS cada parte del código.

Primero tenemos que definir la estructura del menu, “lo general” digamos:

#menu {
list-style: none; /*Las listas tienen un circulito al principio de cada link y con esto lo sacamos*/
padding: 0; /*Para que no halla relleno entre el borde del menu y lo que este dentro*/
width: 100%; /*Esto hace que el menu, en el caso de que los links no llenen todo el espacio disponible, se vea hasta que termine la caja que lo contenga*/
overflow: hidden; /*Esto es complicado*/
margin: 0px; /*Para que no halla margen entre el menu y la caja que lo contenga*/
background-color: #ffffff; /*El color del fondo del menú. Así es más colorido*/
}

 

Estamos en la parte más importante, aca es donde reside la transformación de un menu horizontal para que se vea como tal:

#menu li {
float: left; /*Para que los elementos <li> esten uno al lado del otro y no uno abajo del otro*/
margin: 1px 0px 1px 0px; /*Para que esten un poco separados y no juntos*/
padding: 0; /*Sin relleno*/
}

Ahora seguimos con los enlaces normales, osea, los que estan siempre visibles:

#menu a {
display: block; /*Los enlaces son elementos de línea, con esto los transformamos en elementos de bloque para poder manipularlos mejor*/
float: left; /*Para que esten uno al lado del otro*/
margin: 0; /*Es lo mismo que en las anteriroes veces*/
padding: 5px 8px; /*Es lo mismo que en las anteriroes veces*/
text-decoration: none; /*Es para que los links no esten subrayados*/
color: #06A4F9; /*Es el color de los enlaces*/
}

 

Ahora seguimos con los enlaces que están al posicionar el cursor sobre ellos, así logramos un buen efecto que es muy común pero que nunca vieron como se hacía ;)

#menu a:hover {
padding: 5px 8px; /*Relleno -.-*/
color: #0771AA; /*El color de los enlaces. Así al posicionarse el cursor cambiara el color del enlace*/
background-color: #E1E3E4; /*El fondo del enlace*/
}

 

 

Este menu es básico. Se pueden personalizar más poniendo en lugar de color para el fondo imágenes. También con códigos javascript y cuando aprenda publico el tutorial. Para poner imágenes se cambia la propiedad “background-color” por “background” seguido por el valor “url(url de la imagen)” quedando finalmente así:

background: url(ur de la imagen);