Comece procurando por:
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 AQUINa 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:
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.