Menu Hover Deslizante

Chu! Tudo beno pessositas?? Mi ótima. Eu vim do blog Bunny Crazy, trazendo a vocês um menu muito cute. Eu tirei o print dele, veja abaixo:

Vá até seu HTML e procure por ]]></b:skin>. Acima dessa tag cole esse código:

.heart {
display : block;
 font-size: 10px;
font-family: tahoma;
letter-spacing : 0;
border-bottom : 1px solid #eee;
background-repeat : no-repeat;
text-indent : 5px;
vertical-align : middle;
text-decoration : none;
 line-height : 15px;
margin-bottom : 1px;
padding-left : 3px;
 -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out;
border-left: solid #cordaborda;
background: #cordofundo;
 color: #666 !important;
}
.heart:hover {
display : block;
text-decoration: none;
 vertical-align: middle;
line-height: 15px;
background: #cordofundohover;
 border-left: solid #cordabordahover;
 padding-left: 15px;}

 Coloce as cores que deseja onde esta em negrito, salve e vá para Layout.  Crieum gadget de HTML/JavaScript, cole:

<div class="heart"> seu texto </div>

Escreva o que quiser onde esta escrito "Seu Texto", se quer adicionar mais e só repetir o código colocando um abaixo do outro, assim:

<div class="heart"> seu texto </div>
<div class="heart"> seu texto </div>
<div class="heart"> seu texto </div>