Menu Horizontal DropDown

Menu Horizontal DropDown

...instalar um Menu Drop Down no seu blog.



Para quem não sabe, Menu Drop Down, é aquele que quando passamos o mouse em cima de um determinado botão do menu, logo abaixo dele, se abrem varios sub-menus.


DEMO.

Lembre-se: Salve o seu template antes de começar.
Nunca deixe de fazer um backup do seu Template para evitar transtornos.

1º passo: Aplicar estilos ao seu Menu Drop Down:

Vá em design >> Editar HTML >> Expandir modelos de widgets.
 

Copie o código abaixo e coloque-o 

antes de 

]]></b:skin>

/* NavbarMenu
--------------------------- */
#NavbarMenu {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWHCoSoHDcRjHZtV84kiWVmb4Bv34AfmQKahMyqz_QLKE9ZNag8aaXgstSB_gB2dpjGHRv2rHfH4Fmkf2yU4qXTajaBmYIHUkFirprdDfp1usOwgbLYMX23nI4MiQdspygKE6XWH11Zx4/s1600/navbar.png);
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: capitalize;
}
#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
border-right: 1px solid #fff;


}
#nav li a:hover, #nav li a:active {
background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_loBjGaR0i01WKN0wXuT8UtYcXJEb6a_MuQl0w-Y3naxxQFGhODcK5j9reDRRXsphtKSx1CFxuqR2YXn-CVTLZiosPNasD2vX2ao12UqXHK6sQWpLcKaBAv3MBoRAoQjBphURWHt0r4/s1600/navhov.png);
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;

}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#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;
}

Salve e sigamos para a 2ª parte da instalação.

2º passo: Instalar o Menu Drop Down:

Volte em design >> Editar HTML >> não precisa clicar em 'Expandir modelos de widgets', e procure pelo trecho abaixo:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<-----restante do código---->

</b:section>
</div>

E cole ABAIXO dele:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
 <li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
  </div>
<div style='clear:both;'/>

Instalando o código do 2º passo,

acima de

<div id='header-wrapper'>

faz com que o menu fique abaixo do cabeçalho do seu blog.

Caso queira que o menu fique acima do cabeçalho,                                                 

basta instalar o código acima da tag 

<div id='header-wrapper'>
Salve as modificações.
 
Pronto! 

Agora é só editar os links e nome dos botões no menu, nos locais indicados.


Você pode editar as cores do seu menu,

se quiser, para isto basta alterar os códigos referentes as cores no código da 1º parte deste tutorial.




Se quiser, verifique os códigos das cores nesta Tabela de Cores HTML.
 

(Dica: só edite cores se você for um usuário no nível intermediário ou avançado, pois requer conhecimento maior em css.)

fonte:

mundoblogger