MENU CUPCAKE

Primeiro vá na sua HTML e acima de ]]></b:skin> cole:

.menucupcake {
background: url("URL DO BACKGROUND"); /* Fundo */
width: 200px; /* Largura */
height: 20px; /* Altura */
color: #32809B; /* Cor do texto */
text-align: right; /* Alinhamento do texto */
border-radius: 10px; /* Bordas arredondadas */
padding: 5px;
margin: 5px;
-webkit-transition-duration: 0.30s;
}
.menucupcake:hover {
width: 230px; /* Largura hover */
border-right: 5px solid #32809B; /* Bordinha da direita que aparece com o hover */ 
}

Salve se não tiver nada errado e logo depois cole num gadget HTML/JavaScript isso:

<div class="menucupcake"><a href="http://URL.COM">Home</a></div>
<div class="menucupcake"><a href="http://URL.COM">Sobre</a></div>
<div class="menucupcake"><a href="http://URL.COM">Posts</a></div>
<div class="menucupcake"><a href="http://URL.COM">Contato</a></div>