Menu com mudança de cor (mouse over)

Vamos aprender como fazer um menu de links, mudando a cor quando o mouse estiver sobre um determinado link.

Montamos o CSS com as diretrizes utilizadas em nosso menu vertical

Este será montado sem a utilização de tabelas (TABLE), visando o conceito utilizado por tableless.

CódigoCSS:

Código:


<style type="text/css">
#blokmenu  { width: 130px; font-family: sans-serif; font-size: 11px; }
#blokmenu span { margin: 0 0 0 2; padding: 1 9 1 9; font-weight: bold; border: 0px #0099CC solid; }
#listamenu li { display: inline; }
#listamenu  { height: 20px; margin: 0 0 0 2; padding: 0; }
#listamenu a {
 padding: 2 10 2 10;
 width: 99.99%;
 display: block;
 background-color: #F7F3F7;
 border-bottom: 1px #A9C6E2 solid;
 text-align: left;
 text-decoration: none;
 color: #333333;
}
#listamenu a:hover  { background-color: #FFEFB0; text-decoration: underline; }
#listamenu a:visited { color: color: #333333; }
</style>

Montando o menu:

<div id="blokmenu">
 <span>:: Home</span>
 <ul id="listamenu">
  <li><a href="#">Link 01</a></li>
  <li><a href="#">Link 02</a></li>
  <li><a href="#">Link 03</a></li>
 </ul>
</div>


Perceba que dentro da tag SPAN o efeito dado nos outros itens não é aceionado, assim como a formatação é diferente também.