Como fazer menu Hover

O Menu Hover é uma coisa muito legal do CSS, ao passar o mouse ele troca a imagem do background, por exemplo: O menu vertical daqui do site é usado com essa mesma técnica xD

Atendendo a um pedido (E tambem eu ja ia postar cedo ou tarde .-.) fiz um tutorial de como usar ele.

Bom, no blogger, vá em Design, Editar HTML, procure pela tag:
]]></b:skin>

Acima dela cole este código CSS:

#menux ul {
list-style: none;
margin: 0px 0px 0px 0px;;
padding: 0;
border: none;
}



#menux li a {
height: 18px;
display: block;
padding: 4px 5px 5px 18px;
background: url(LINK_DA_IMAGEM_NORMAL) no-repeat;
color: #ffffff;
text-shadow: #000 0 1px 0;
font-weight: normal;
text-decoration: none;
width: 186px;
}



#menux li a:hover {
background: url(LINK_DA_IMAGEM_HOVER) no-repeat;
color: #000;
text-shadow: #666666 0 1px 0;
}



Bom, em color é a cor do texto, em height a altura em píxels, em width a largura em píxels, em padding você posiciona o texto.

Agora vamos aos links, definiremos uma div para aplicar as configurações da folha de estilos CSS, criamos-a com o nome menux então o id da div terá de ser menux.

então nosso código fica assim:
<div id="menux">
<ul>
<li><a href="LINK_DO_POST">NOME_DO_POST</a></li>
</ul>
</div>

Para adcionar mais um link basta duplicar o código abaixo e colocar ele embaixo do outro:
<li><a href="LINK_DO_POST">NOME_DO_POST</a></li>

Pronto, agora você ja tem um menu legal com efeito hover.