Menu horizontal simples

 Fala aí gente, aqui é o Anon e hoje venho trazendo mais um tutorial para vocês, dessa vez é de como construir um menu horizontal simples, mas bem útil. Vamos ao trabalho!
 Comece procurando por:


]]></b:skin>

Acima, iremos colar o seguinte código:


.menu-top{
font-family:Arial; /* --Fonte--*/
font-size:XXpx;/* --Tamanho da fonte--*/
color:#XXX; /* --Cor das palavras--*/
margin:0 0 0 0; /* --Posicionamento--*/
font-weight: bold;
text-shadow:2px 2px 5px #999999; /* --Sombras--*/
}
.menu-top a{
font-family:Arial; /* --Fonte--*/
font-size:XXpx; /* --Tamanho da fonte--*/
color:#XXX; /* --Fonte--*/
font-weight: bold;
}
.menu-top a:hover{
font-family:arial; /* --Fonte--*/
font-size:14px; /* --Tamanho da Fonte--*/
color:#fff; /* --Cor da Fonte--*/
font-weight: bold;
cursor:pointer;
}

• Estudando o código

Logo na primeira parte do código, ".menu-top{", iremos definir as características das palavras que não forem links, eu costumo usar pra definir a cor dos separadores e posicionamento do menu, aliás, se tiver dúvidas quanto a posicionamento, clique AQUI
Na segunda parte do código, ".menu-top a{", iremos definir as características dos links antes de passar o mouse por cima.
E por fim, na ultima parte do código, ".menu-top a:hover{", iremos definir as características dos links ao passar o mouse por cima.

• Usando o menu

Para usar o menu, você deverá inserir o seguinte código:


<div class="menu-top"><a href="LINK">Link 1</a> | <a href="LINK">Link 2</a> | <a href="LINK">Link 3</a> | <a href="LINK">Link 4</a></div>

 Por ser um menu horizontal, é comum se se localiza no cabeçalho, portanto, insira acima de:


<div id='content-wrapper'>

Um belo exemplo de como usar esse menu é o site NarutoEX, a diferença é que eles usam a fonte "Impact". É isso aí gente, se tiverem dúvidas, comentem. ^^'