Menu Inverse

Olá pessoal, hoje trago mais um menu super fofo para vocês, ele se chama menu inverse.

Os créditos vão para Pequena Garota. Para ver o menu clique aqui

Para colocar em seu blog, coloque o código abaixo acima da tag ]]></b:skin> 

/*Menu Inverse - Pequena Garota*/
inverse{
color: #367fac;
text-align:center;
font-family: 'Pixelade';
font-size: 13px;
background: #BBD5F3;
padding: 2px;
float: left;
margin: 2px;
width: 15%;
-webkit-transition-duration: .80s;
border-radius:2px;
-moz-transition: 0.7s ease-out;
-transitio-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
inverse:hover{
background: #ffc0c0;
color: #ff8080;
-webkit-transition-duration: .80s;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
@font-face {
 font-family: 'Pixelade';
 src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');
 }

-background: #ffc0c0;

Este código é referente a cor do fundo do menu.

-font: normal 20px Pixelade;

Este código é referente ao tamanho e a fonte do menu

 -text-shadow:0 1px #ccc;

Este código é referente a sombra da fonte

 -moz-box-shadow: inset 0 0 0px 38px #67A9BF;l/java script
 -webkit-box-shadow: inset 0 0 0px 38px #67A9BF;
 box-shadow: inset 0 0 0px 38px #67A9BF;

Estes códigos referem-se a cor do menu quando o mouse está em cima.

Para fazer o menu funcionar coloque o código abaixo no gadget htm/java script

<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='01'">01</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='02'">02</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='03'">03</div></a> <br /></div>

Para colocar este menu dentro do cabeçalho coloque o código abaixo no gadget html/java script

<div style="position: absolute; margin-top: -100px; left: -200px;">COLOQUE O CÓDIGO DO MENU AQUI</div>

Ficando assim:

<div style="position: absolute; margin-top: -100px; left: -200px;">
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='01'">01</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='02'">02</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='03'">03</div></a> <br /></div>
</div>

Em margin-top é a altura.
Em left é o espaço a esquerda. Você pode alterar por right para que ele fique na direita.
Depois é só aumentar ou diminuir os valores até chegar onde você queira!