Crear un menú horizontal simple con CSS

Bueno pues este es un tutorial sobre como hacer un menu horizontal con css, lo he encontrado en la web, y pues creo que es de utilidad para aquellos que no tienen mucho conocimiento acerca del css.

Usaremos listas para crear este menú horizontal. Consta de 8 enlaces (por defecto, podemos incluir cuantos queramos):

Código HTML

Código:

<ul id=”button”> 
<li><a href=”#”>Home</a></li> 
<li><a href=”#”>About</a></li> 
<li><a href=”#”>Services</a></li> 
<li><a href=”#”>Clients</a></li> 
<li><a href=”#”>Products</a></li> 
<li><a href=”#”>F.A.Q</a></li> 
<li><a href=”#”>Help</a></li> 
<li><a href=”#”>Contact Us</a></li> 
 
</ul

Pero claro, este menú no tiene estilo (CSS). Sin estilo se muestra así:



Código CSS

Vamos aplicarle estilo pues. Solo usaremos un nombre de ID para aplicar CSS Se llamará “button”:

Código:

#button { 
padding: 0; 
} 

El código anteriormente expuesto eliminará el padding que pueda haber por defecto en la lista de elementos.
Como vamos a crear un menú horizontal, la lista deberá ser horizontal, así que diremos que se dispongan en línea (display: inline):

Código:

#button li { 
display: inline; 
} 

Nos quedará algo parecido a esto:



Ahora viene lo divertido. Vamos a aplicar los colores, fuentes y tamaños del menú (a nuestro gusto, claro está):

Código:

#button li a { 
font-family: Arial; 
font-size:11px; 
text-decoration: none; 
float:left; 
padding: 10px; 
background-color: #2175bc; 
color: #fff; 
} 

Y el menú va quedando de esta manera:



Vamos a aplicar un efecto :hover al mover el ratón encima de un elemento de la lista (menú). Nótese la diferencia de padding, margin y color de fondo que mostraremos:

Código:

#button li a:hover { 
background-color: #2586d7; 
margin-top:-2px; 
padding-bottom:12px; 
} 

El efecto sería este:



Saludos espero les sirva!