Menu Vertical em CSS

Um dos exercícios mais praticados com meus alunos no curso de webdesign é a construção de menus em CSS. Além de trabalhar com vários elementos das folhas de estilo é uma ótima oportunidade de compreendermos melhor a Box Model.
No post de hoje vou ensinar a fazer um menu vertical simples utilizando apenas HTML e CSS.
O motivo de tocar em um tema tão batido como esse é devido aos inúmeros erros que venho vendo em alguns códigos por ai. Na maioria das vezes, são duplicações de informações, declarações sem sentido ou no lugar errado como indicar o width ou o height em todas a variáveis. São erros que deixam o código pesado e podem levar a novas "gambiaras" caso queiram acrescentar algo novo no código como uma imagem rollover.
Para se criar um menu, seja ele vertical ou horizontal, o indicado é utilizar listas não ordenadas, a conhecida <ul>, pois apresenta grande flexibilidade e versatilidade para estilização.
O primeiro passo é criar uma div que emglobe nosso menu e com um id para ser referenciado no CSS, no caso vou utilizar o id="menu". Depois crie uma lista não ordenada com cinco elementos (podem ser quantos elementos você quiser). Veja o código:

<div id="menulateral">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">A Empresa</a></li>
<li><a href="#">ProdutoA</a></li>
<li><a href="#">ProdutoB</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>:

Veja o resultado.

- Vamos configurar a largura do menu através da regra width: 150px; que deve ser aplicada tanto na div #menu quanto em #menu ul;
- Vamos retirar os "bullets", que são aqueles marcadores laterais, as bolinhas laterais, através da regra list-style:none; aplicada em #menu li;
- Vamos zerar a margin e o padding que por padrão apresentão valores diferentes dependendo do navegador através das regras margin:0; e padding:0; aplicadas em #menu ul;
- Vamos acrescentar um pequeno espaçamento embaixo de cada <li> para que facilite a vizualição através da regra margin-bottom: 2px; aplicado no elemento #menul li;
- É importante resaltar que essas regras devem ser associadas exatamento aos respectivos elementos para não gerar sobrecarga de código desnecessário, como por exemplo aplicar a definição width: 150px; no elemento #menu li;

#menu {
width: 150px;
}

#menu ul {
width: 150px;
padding: 0px;
margin: 0px;
}

#menu li {
list-style: none;
margin-bottom: 2px;
}

Veja o resultado.

Agora vamos estilizar os links e seus estados.
- Vamos definir a altura de cada elemento através da regra heigth: 25px; e dar uma espaçamento na lateral esquerda através da regra padding: 0 0 0 10px; aplicando ambas no elemento #menu a;
- Vamos acrescentar a regra display: block; no elemento #menu li com a finalidade de fazer com que a troca da cor do fundo seja na extensão toda do elemento <li>;
- As outras regras eu acredito que a maioria já esteja familiarizado como a troca da cor de fundo através do estado "hover" do link;

#menu a {
display: block;
text-decoration: none;
background: #FF9933;
color: #FFFFFF;
height: 25px;
padding: 0 0 0 10px;
}

#menu a:visited {
}

#menu a:hover {
background: #669933;
}

Veja o resultado.

Conclusão:
Utiliza-se o mínimo possível de regras nos elementos <ul> e <li> e prioriza-se a estilização no link. Assim você terá um código limpo, compacto e compatível com os navegadores.
No próximo post irei explicar como fazer um menu horizontal.
Grande abraço a todos e até o próximo post.