Tutorial CSS Para menu Horizintal

[inocente]

Saudações meus queridos, nesse tutorial estarei ensinando aqui como criar um menu horizontal.

É bem simples, você podera fazer ele apenas com cores ou com imagens. No caso eu estarei fazendo com 3 imagens, a do Menu normal, do separador de menu e do Menu Hover, ou seja, quando a setinha do mouse passar em cima do menu aparece a imagem do menu Hover.
Vamos deixar de papo e vamos ao tutorial. Let's go

Antes de tudo temos que fazer o html bem simples

Código HTML:

<div id="menu">
<a href="home.html">Inicio</a>
<img src="images/separador_menu.jpg" />
<a href="equipe.html">Equipe</a>
<img src="images/separador_menu.jpg" />
<a href="downloads.html">Downloads</a>
<img src="images/separador_menu.jpg" />
<a href="parceiros.html">Parceiros</a>
<img src="images/separador_menu.jpg" />
<a href="contato.html">Contato</a>

Bom explicando um pouco sobre o codigo acima:Fiz uma div id com o nome de menu e fiz uns links normal, em baixo pus uma imagem que é a do separador de menu. Agora vamos ao codigo do CSS

Citação:
#menu {height:30px; background:url(images/menu.jpg) no-repeat;}
#menu a {float:left; text-decoration: none; color:#FFF; font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; padding:5px 15px;}
#menu a:hover {background:url(images/menu_hover.jpg) repeat-x;}
#menu img {float:left;}

Bom .. este ai é o tutorial espero que tenham gostado

Creditos : inocente

[faccaobnz]

muito bom mlk doido otimo tuto lek