Menu Hover com Imagens

Oi venho trazer mais um tuto. Hoje vou ensinar como colocar um Menu Hover com Imagens igual ao usado aqui, como eu ja falei, eu não gosto muito de coisas com imagens eu procuro me aprimorar mais em CSS... pois bem vamos ao tutorial que por sinal é bem rápido e fácil.

Vá em Design >> Editar Html >> e procure pela seguinte tag:

]]></b:skin>
e cole o seguinte CSS acima:

/* Menu-DoS
----------------------------------------------- */ 
.menu-dos ul { 
list-style: none; 
margin: 5px 0px 0px 10px; 
padding: 0; 
border: none; 
} 
.menu-dos li a {
width: 200px; /* Coloque o tamanho da imagem */
height: 15px; /* Coloque altura da imagem */
display: block; 
padding: 2px 5px 5px 16px;
background: url(URL DA IMAGEM NORMAL) no-repeat; /* Imagem para o estado normal */
color: #000; /* Edite a cor dos links */ 
text-shadow: #fff 0px 1px 2px; /* Edite a cor da sombra e sua distância */ 
font-weight: normal;
text-decoration: none; 
} 
.menu-dos li a:hover { 
background: url(URL DA IMAGEM HOVER)no-repeat; /* Imagem para o estado hover */
color: #fff; /* Cor dos links no estado hover */
text-shadow: #000 0px 1px 2px; /* Edite a cor da sombra e sua distância */
}

Agora é só adicionar o seguinte código no seu gadget:

<div class="menu-dos"> <ul><li><a href="URL DO LINK">NOME DO LINK</a></li></ul> <ul><li><a href="URL DO LINK">NOME DO LINK</a></li></ul> <ul><li><a href="URL DO LINK">NOME DO LINK</a></li></ul> </div>
Para colocar mais links basta repetir este trecho:

<ul><li><a href="URL DO LINK">NOME DO LINK</a></li></ul>
Pronto galera espero que tenham gostado, e lá vou eu, depois trago mais novidades.