Tutorial:Menu Roll

                                               Como vão meus queridos?      
Hoje não estou bem, mais deixa para lá é coisa de fã...kkkkkkkkkkk, bem hoje trago um tutorial de um menu que achei no tumblr então é de lá, mais passei para o modo blogger, mais o corpo do menu é de lá, ok? é esse menu aqui
Então vamos com o tutu?


   Primeiramente, tecle Ctrl+f no seu HTML e procure a tag ]]></b:skin> e cole acima dessa tag o codigo abaixo:

/** MENU ROLL **/
.menu {font-family: 'Calibri'; font-size: 11px; text-transform: uppercase; width: 150px; -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2); box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
.menu h4 {border-bottom: 1px solid rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 15px; font-weight: 500; padding: 7px 12px; background: #a90329; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;}
.menu h4:hover {background: #cc002c; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s;}
.menu li, .menu li a {text-decoration: none; color: #888; background: #f0f0f0; border-bottom: 1px solid #e0e0e0; -webkit-transition-duration: 1s; -moz-transition-duration: 1s;}
.menu li:hover, .menu li a:hover {background: #e0e0e0; -webkit-transition-duration: 1s; -moz-transition-duration: 1s;}
.menu ul {margin-top: -25px; background: #fff; line-height: 24px; list-style-type: none; overflow: hidden; padding: 0px; height: 0px; -webkit-transition: height 1s ease; -moz-transition: height 1s ease;}
.menu:hover ul {height: 100px;}

 
     Mude conforme está em laranja, ok?


Agora para aparecer o menu 
adicione um gadget  HTML/JavaScript e cole o codigo abaixo:

<div class="menu">
<h4>Navegue</h4><ul>
<li><a href="LINK">Nome</a></li>
<li><a href="LINK">Nome</a></li>
<li><a href="LINK">Nome</a></li>
<li><a href="LINK">Nome</a></li>
</ul></div>

Link: URL da pagina
Nome: Nome da pagina Avá


                                                 Qualquer duvida é só me falar
                                                      ~~Kisses meus amores~~