Oie :3
Já que eu não consegui preparar quase nada pra postar, vou postar tutoriais do Kawaii World u3u espero que gostem, bem, vamos lá ~
O menu é bem fofinho, quando passa o mouse, a linha muda de cor e cresce, é um bom tutorial pra um blog fofinho ou com cores pastéis, combina bastante, acho.
1. Procure por ]]></b:skin> e antes da tag, cole:
.midnight{background: #dfdbdb;font-family: trebuchet ms;font-size: 11px;margin: 2px;color: #000;display: block;-moz-box-shadow: inset 4px 0 0px 0 #a09aa3;-webkit-box-shadow: inset 3px 0 0px 0 #fe79ab;box-shadow: inset 3px 0 0px 0 #ee79b6;padding: 3px 3px 3px 6px;-moz-transition: all 0.4s ease-out;-webkit-transition: all 0.8s ease-out;-o-transition: all 0.8s ease-out;-ms-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}.midnight:hover{-moz-box-shadow: inset 550px 0 0px 0 #d5e0c6;-webkit-box-shadow: inset 550px 0 0px 0 #f192ba;box-shadow: inset 550px 0 0px 0 #d5e0c6;color: #818181;}
~ Entendendo o código:
background: #dfdbdb; - Cor do seu fundo inicial.
font-family: trebuchet ms; - Fonte.
font-size: 11px; - Tamanho da fonte.
margin: 2px; - Espaço entre cada linha do menu.
color: #000; - Cor da fonte.
box-shadow: inset 3px 0 0px 0 #ee79b6; - Cor da linha quando menor.
E o resto você vê quando for trocando.
2. Para usar, vá em um gadget de HTML/JavaScript e cole:
<div class="midnight"> Seu texto </div>