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:



salu2!! espero que les haya servido el tutorial :)

es mas un tuto, gracias por el aporte

Gracias por el aporte pedro, adivina quien soy :P

pss eres marcofbb no?? xD

waaaa Jquery me agrada Jquery es bueno jeje!

Rikudou Sennin escribió:waaaa Jquery me agrada Jquery es bueno jeje!

Igual en este menu no se uso nada jQuery, solo HTML y CSS

en lugar de background-color:...
usar background:url(URL DE LA IMAGEN);

Gracias por el aporte

Buen aporte y buen tuto! :D