[Tutorial] Como crear un Menu Horizontal con Css

En este tutorial les Enseñare a Como crear un Menu utilizando Css .
Comenzemos.

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

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”:

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):

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á):

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:

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

El efecto sería este:




Aqui finaliza el Tutorial.


Pero si no lo Entendiste bien aqui te dejo los Codigos completos para que los uses si es que deceas.

Codigo Css.

Codigo Html

Si deces ver como funciona entra aqui ; http://brianpwg.es.tl/Ejemplo-de-Menu.htm

Recuerda nunca borrar el BUTTON ya que se conecta con el css , en caso que sepas de css Cambialo.