Menu Drop Down - Simples

adorable, amazing, awesome, beautiful

Olá meus amores, tudo bem? Hoje vou ensinar um tutorial já pedido pela blogueira Lais do blog Portal do Mundo, que é como colocar um menu drop down. É bem simples e fica bem legal. É recomendado para blogs que possuem muitas páginas ou muitas tags. Lá vai gente, clique em Leia Mais e confira!


TUTORIAL

Este tutorial eu aprendi no Mundo Blogger.  

O tutorial é sobre aquele antigo menu que eu tinha aqui no blog. Vocês podem ver o exemplo aqui.

Blogger > Modelo > Editar HTML

Cole o código abaixo antes de ]]></b:skin>

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #COR; /* COR DE FUNDO DO MENU */
width: 100%; /* LARGURA AUTOMÁTICA, SE ADAPTA A SEU BLOG */
height: 35px; /* ALTURA */
font-size: 12px; /* TAMANHO DA FONTE DO MENU */
font-family: Arial, Tahoma, Verdana; /* FONTE DO MENU */
color: #FFF; /* COR DA FONTE DO MENU */
font-weight: bold; /* FONTE EM NEGRITO */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#NavbarMenuleft {
width: 100%;
float: left; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav {
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav ul {
float: left; /* NÃO ALTERE */
list-style: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav li {
list-style: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 0; /* NÃO ALTERE */
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /* COR DO LINK */
display: block; /* NÃO ALTERE */
font-size: 16px;/* TAMANHO DA FONTE DO LINK */
font-family: Georgia, Times New Roman;
font-weight: normal; /* FONTE EM NEGRITO */
margin: 0; /* NÃO ALTERE */
padding: 9px 15px 8px; /* NÃO ALTERE */
}
#nav li a:hover, #nav li a:active {
background: #COR ; /* COR DO FUNDO HOVER */
color: #FFF;  /* COR LINK EM HOVER */
margin: 0; /* NÃO ALTERE */
padding: 9px 15px 8px; /* NÃO ALTERE */
text-decoration: none; /* NÃO ALTERE */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #COR; /* COR DO FUNDO HOVER */
width: 150px; /* LARGURA DO SUBMENU */
color: #FFF; /* COR DO LINK DO SUBMENU */
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal; /* ALTERE PARA ITÁLICO (ITALIC), NEGRITO (BOLD) OU OUTROS */
float: none; /* NÃO ALTERE */
margin: 0; /* NÃO ALTERE */
padding: 7px 10px; /* NÃO ALTERE */
}
#nav li li a:hover, #nav li li a:active {
background: #777; /* COR DO SUBMENU HOVER  */
color: #FFF; /* COR DO LINK DO SUBMENU HOVER */
padding: 7px 10px; /* NÃO ALTERE */
}
#nav li {float: left;padding: 0; /* NÃO ALTERE */
}
#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0; /* NÃO ALTERE */
}
#nav li ul a {width: 140px; /* NÃO ALTERE */
}
#nav li ul ul {margin: -32px 0 0 171px; /* NÃO ALTERE */}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em; /* NÃO ALTERE */}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}
#nav li:hover, #nav li.sfhover {position: static; /* NÃO ALTERE */}

Salve. Vamos continuar. Agora vá para Layout e adicione um Gadget HTML/JavaScript e nele cole:

 <div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='SEU LINK AQUI'>Nome do Link 1</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
<li><a href='SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='SEU LINK AQUI'>Nome do Link </a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
<li><a href='SEU LINK AQUI'>Nome do Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
Preencha os links de acordo como desejar. Espero ter ajudado, até o próximo post ;D