Tutorial: Menu Hover Expand

Olá Pessoal,

Hoje eu trouxe um Menu super cute e simples, ele é muito lindo gente, foi que eu que criei tá, então não se esqueçam dos créditos, ok? Vamos ver o menu e o tutorial?

O menu é assim:

Quando você passa o mouse em cima dele, ele fica com um "?" Ponto de interrogação. Não retire, ok?

Para pegar o menu, entre no "Editar Html" e procure por: ]]></b:skin>

Acima dele cole:

/* Menu Hover Expand by Delicate Girl */

Hover-Expand-SweetDream{

color: #fff; /* cor da fonte */

text-align:center; /* Lugar do Texto */

font-size: 12px; /* Tamanho da fonte do menu */

background: #FFDEAD ; /* Fundo do menu */

padding: 1px;

float: left; /* Lugar onde ele fica */

margin: 4px;

cursor: help; /* Não remova importante! se remover desconfigura todo o HTML */

width: 15%; /* tamanho do menu */

-webkit-transition-duration: .80s;

border:1px solid #FFDEAD; /* bordas */

border-radius: 5px; /*---- arredondar as bordas ----*/

box-shadow: 1px 1px 5px #D3D3D3

}

Hover-Expand-DG:hover{

background:#FA8072; /* fundo do menu hover */

border:1px solid #FA8072; /* bordas quando passa o mouse */

color: #fff; /* cor da fonte quando passa o mouse */

border-radius: 0px;

box-shadow: 1px 1px 5px #696969;

-webkit-transition-duration: .80s;

}

Color: Cor da Fonte | Color: Cor do Fundo | Color: Cor das bordas

Para adicionar: Abra Html/JS, Cole e Arrume:

<center><div>

<a href="Seu Link"><hover-expand-sweetdream>Nome do Menu</hover-expand-sweetdream></a>

<a href="Seu Link"><hover-expand-sweetdream>Nome do Menu</hover-expand-sweetdream></a>

<a href="Seu Link"><hover-expand-sweetdream>Nome do Menu</hover-expand-sweetdream></a>

<a href="Seu Link"><hover-expand-sweetdream>Nome do Menu</hover-expand-sweetdream></a>

<a href="Seu Link"><hover-expand-sweetdream>Nome do Menu</hover-expand-sweetdream></a>

</div><center></center></center></center></center>

Editem como quiser, espero que tenham gostado! 

Beijos Bye*