Lista com efeito hover

Olá! A partir de hoje estarei podendo entrar mais aqui no blog, então, felizmente acabou isso de postar só de vez em quando. Hoje fiz uma lista com efeito hover, que, além dos vários modos de usar listas pelos gadgets, também pode ser usada como um menu simples.

Clique aqui para visualizar

Vá no HTML do seu blog e cole o código seguinte acima de ]]></b:skin>

.menusimple {
background: #ffccdc; /* Cor da barra passando */
border-radius: 5px;
padding: 5px;
margin: 2px;
box-shadow: inset -280px /* Largura da lista ou menu */
0 0px 0px #ffdde8; /* Cor do fundo normal */
-webkit-transition-duration: 0.40s; /* Duração da transição */
}
.menusimple:hover {
box-shadow: inset 280px /* Largura da lista ou menu */
0 0px 0px #ffeaf1; /* Cor do fundo quando passa o mouse */
}

Se colocar alguns pixels a mais de largura do que realmente for, não tem problemas, só ficará errado se colocar a menos.

Se for usar como menu, recomendo que em transition-duration mude o "0.40s" por "0.80s".

Para usar em lista, cole num gadget HTML/JavaScript esse código:

<div class="menusimple">Seu texto</div>
<div class="menusimple">Seu texto</div>
<div class="menusimple">Seu texto</div>

Para usar em menu, cole esse:

<center>
<a href="LINK-1" class="menusimple">Nome do link 1</a>
<a href="LINK-2" class="menusimple">Nome do link 2</a>
<a href="LINK-3" class="menusimple">Nome do link 3</a>
<a href="LINK-4" class="menusimple">Nome do link 4</a>
</center>

É isso, espero que tenham gostado, abraços!