Menu hover com Borda

Oi gente , eu adaptei esse menu hover  e coloquei um efeito bem legal , veja o exemplo e confira o tutorial:

1 - Vá em Modelo > Editar HTML e procure por ]]</b:skin> e cole esse código antes:

menu  {

font-family: Verdana; 

letter-spacing: 2px; 

font-size: 10px; 

line-height: 13px; 

display: 

inline-block; 

background:#F3F3F3; 

color:#000; 

width: auto; 

padding: 5px; 

margin: 1px; 

text-align: center; 

text-transform: uppercase;

border-bottom: 2px solid #FF99CC;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}

menu:hover {

font-family:Verdana; 

letter-spacing: 2px; 

font-size: 10px; 

line-height: 13px; 

display: inline-block; 

background:  #000; 

color:#fff; 

width: auto; 

padding: 5px; 

margin: 1px; 

text-align: center; 

text-transform: uppercase; 

border-bottom: 5px solid #00CCFF;
 -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
}

Edite como quiser e cole esse código onde quer que apareça 

<a href="LINK"  title="TITULO"><menu>NOME</menu>

Créditos do Código : http://adgajsdgasygdsia.tumblr.com/

Créditos pelo Tutorial e Adaptação : Sugoi Tutoriais