Menu Vertical com efeito 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:

Testando Testando Testando

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-dos{
height:20px;
background: none;
color: #000 !important;
display:block;
font:12px "Arial", Lucida Sans Unicode,Verdana;
margin-left:0px;
padding-left:5px;
font-weight:normal;
line-height:175%;
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
 }
a.menu-dos:hover{
background: none;
height:20px;
display:block;
padding-left: 25px;
color: #ccc !important;
-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-dos" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-dos" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-dos" href="LINK DO MENU">NOME DO LINK</a>
<a class="menu-dos" 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.