Menu Horizontal


Nesse tutorial, vou ensinar como se faz um menu horizontal como o exemplo abaixo:



Programa necessário: Bloco de Notas

1º passo: Abra o seu CSS (cssblog.css que aprendeu a fazer no outro tutorial).

2º passo: Copie o código abaixo e cole no fim do css:

#menu {
position: absolute;
width: 500px;
}

#menu UL {
font-size: 7pt;
color:#FFFFFF;
text-transform: uppercase;
font-family:tahoma, arial, verdana, ms-serif;
font-weight: bold;
line-height: 18px;
padding-top: 0px;
padding-right: 0px;
padding-left:35px;
clear: left;
margin-top: -26px;
margin: 1px;
list-style-type: none;
border-right: 1px #FFFFFF;
opacity:0.60
}

#menu UL LI {
display: ;
float: left;
margin: 2px;
width: auto;
text-align: center;
border-bottom:0px solid
}

#menu UL LI A {
font-family: tahoma, arial, verdana, ms-serif;
font-weight: bold;
color:#FFFFFF;
text-align: center;
background-color:#FFFFFF;
letter-spacing: 1px ;
font-size: 7pt;
voice-family: inherit;
line-height: 25px;
display: block;
width: 95px;
height: 25px;
}

#menu UL LI A:hover {
color:#FFFFFF;
background-color:#FFFFFF;
position: relative;
left:0px;
top: 0px;
}

#menu UL LI A:active {
color:#FFFFFF;
background-color:#FFFFFF;
position: relative;
top:0px;
}

#nave {
padding-left:1px;
width: 500px;
margin-top:0px;
margin-left:-35px;
list-style: none;
display: inline;
float: left;
}


3º passo: As cores estão todas em branco (#FFFFFF). Agora, coloque o código da cor e modifique o que você desejar.

Obs: Cuidado para não retirar o item chamado #nave. É essa tag que configura a posição do menu em sua página.

4º passo: Agora, abra seu HTML principal e, aonde quer que apareça o menu, cole o código abaixo:

<div id="nave">
<div id="menu">
<ul>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">Home</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">About</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">HP</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">Magia</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">Astros</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">For You</a></li>
<li><a href="HTTP://ENDEREÇO DA PÁGINA"
target="_blank">For Blogs</a></li>
</ul>
</div>
</div>


Pronto! Agora salve o seu HTML.

Tutorial feito por mim! Qualquer cópia é totalmente proibida!