Menu Vertical Transition

Galera hoje vou postar um tuto que pra variar me pediram no chat. É um Menu Vertical com efeito Transition, esse menu tem esse efeito Transition que retarda o tempo de chegada ate o local estipulado. Confira a demonstração logo abaixo:

Demonstração

1º - Vá em >> Design >> Editar HTML >>, procure por:

]]></b:skin>
Acima dela adicione a seguinte folha de estilo:

/* Menu Vertical By: Lord Schiffer
----------------------------------------------- */
a.menu-up{
width: 190px;
height:20px;
background: #272727;
color: #fff !important;
display:block;
font:12px "arial", Lucida Sans Unicode,Verdana;
margin-left:0px;
margin-top: -9px;
margin-bottom: 12px;
padding-left:5px;
font-weight:normal;
line-height:175%;
border-radius: 5px;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
a.menu-up:hover{
width: 180px;
height:20px;
display:block;
padding-left: 15px;
margin-top: -9px;
margin-bottom: 12px;
background: #ccc;
color: #272727 !important;
border-radius: 5px;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
É só editar, e deixar de acordo com seu tema.

2º - Vá em >> Layout >> e adicione um gadget de HTML, colocando a seguinte lista de links:

<a class="menu-up" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-up" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-up" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-up" href="LINK DO MENU">NOME DO LINK</a>

Nota: a transição é apenas o efeito de retardamento, o que causa o afastamento é o padding-left... se você prestar atenção verá que no modo normal o padding esta assim >> padding-left:5px; << e no Hover (estado ao passar o mause no link) esta assim >> padding-left:25px; <<... caso queira aumentar o afastamento logicamente você terá que aumentar o padding-left e se quiser diminuir, diminua o padding-left.

É isso ai galera, espero que tenham gostado do meu tuto, ate mais.