Menu Horizontal DropDown
Autor: Wirleany Maria Blog | Publicado: 2012-03-09T14:11:00-08:00










esta um tutorial de como &nbsp;inserir &nbsp;  
um menu horizontal ou vertical.

Obs:Salve o seu template antes de começar.
1º parte: Aplicar  estilos ao seu Menu Drop Down:

Vá em design &gt;&gt; Editar  HTML &gt;&gt; Expandir modelos de widgets.
Copie o código abaixo e coloque-o  antes de&nbsp;]]&gt;&lt;/b:skin&gt;/* NavbarMenu
--------------------------- */
#NavbarMenu  {
background: #555  url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/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(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/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;
}
Apos concluir salve.

2º parte: Instalar o  Menu Drop Down:

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

&lt;div id='NavbarMenu'&gt;
&lt;div  id='NavbarMenuleft'&gt;
&lt;ul id='nav'&gt;
&lt;li&gt;&lt;a  expr:href='data:blog.homepageUrl'&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a  href='ENDEREÇO DO SEU LINK AQUI'&gt;Link  1&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #1.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link #1.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link  #1.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #1.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link  #1.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU LINK AQUI'&gt;Link  2&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #2.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link #2.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link  #2.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #2.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link  #2.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU LINK AQUI'&gt;Link  3&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #3.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link #3.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link  #3.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #3.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link  #3.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU LINK AQUI'&gt;Link  4&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #4.1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link #4.2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a  href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Sub Link  #4.3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK  AQUI'&gt;Sub Link #4.4&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='ENDEREÇO DO  SEU SUBLINK AQUI'&gt;Sub Link  #4.5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div  style='clear:both;'/&gt;Salve e Pronto:Agora é só editar os links e nome dos botões no menu, nos locais  indicados.(Voçe tambem pode fazer alteração de cores modificando o html &nbsp;do codigo)