Tutorial Web Design – Parte I -> Passo 7
Passo 7 – Corrigir o menu
Para já o nosso menu está muito feio… Vamos adicionar mais algumas linhas de CSS para o deixar mais bonito:
ul#menu {
margin:0px; padding:0px;
position:absolute;
right:0px;
}
ul#menu li {
display:inline;
margin-left:12px;
}
ul#menu li a {
text-decoration:none;
color:#716d6a;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu li a.active, ul#menu li a:hover {
color:#211e1e;
}
Nada de especial foi adicionado excepto a função “:hover” que dá outro ar ao menu. Este “:hover” é como se comporta determinado elemento quando o rato passa por cima dele. Neste caso, o link escurece.
Só um pormenor, já que estão a aprender. Não é preciso usar px quando estás a definir tamanhos ou posições iguais a 0. 0 é zero. Isso seria o mesmo que dizer que 1 kilo de ouro é mais pesado que 1 kilo de penas.