Caros leitores, estrou de volta para terminarmos a montagem do nosso menu com css.
Essa é a última parte do artigo, onde montarem o estilo CSS para o menu.

Para quem não leu o artigo anterior, clique aqui para poder fazer a leitura. Quem já leu, prossiga com aleitura desse artigo.

Mãos à obra...

Digite os códigos abaixo para criar a sua folha de estilo. Explicarei cada bloco CSS, mas eles devem ser digitados um após o outro.

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
           }


O código acima formata o menu, tendo largura de 200px bordas de 1px e margens de 10px;

#menu li a {
height: 32px;
   voice-family: ""}"";
   voice-family: inherit;
   height: 24px;
text-decoration: none;
}


O código acima formata o link de cada botão do menu, especificando principalmente a altura de cada botão, que é de 32px, como na figura criada e tira o sublinhado do link (text-decoration: none;).

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}


Esse código define o visual do menu após o botão ser clicado.

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}


Esse código define o visual do menu quando o botão do mouse é pressionado sobre ele.

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}


Esse código define o visual do menu quando ativo.

Importante:

Repare a linha background: url(images/menu1.gif) 0 -64px; nos códigos acima, esta linha define a posião da imagem em relação ao menu.
No artigo anterior foi criada apenas uma imagem com os 3 estados do botão, e essa linha faz com que a imagem se mova, dando a sensação de ser uma imagem pra cada estado.

Veja um exemplo desse menu clicando aqui.

Espero que tenham gostado.

Qualquer dúvida enviem-me um e-mail ou postem no fórum do site, o melhor lugar para o esclarecimento de suas dúvidas.

Até a próxima...