como que se faz: menu dropdown...

Como que se faz: menu dropdown...?...

Tutorial:

Logado em seu painel blogger,

...clique em:

... design...

...editar HTML...

...expandir modelos de widgets...

 E, procure por:

  

 ]]></b:skin>

encontrado,

 Cole , antes de

]]></b:skin>

o código abaixo:
#navbar-iframe{height:0;visibility:hidden;display:none} ( esta parte, é se você for retirar a navbar)

#menu-wrap {}
#menu { margin: 0px auto; width: 1005px; height:40px;  }
#menu ul {height:40px;}
#menu ul li {font-weight:bold;font-size:14px;}
#menu ul li a {text-shadow:2px 1px 2px #006400;text-transform:uppercase;margin:0px 0px 0px 0;text-decoration:none;color:#fff;}

.sf-menu,.sf-menu *{margin:0;padding:0;list-style:none}
.sf-menu{line-height:1.0}
.sf-menu ul{position:absolute;top:-999em;width:10em;}
.sf-menu ul li{width:100%}
.sf-menu li:hover{visibility:inherit;}
.sf-menu li{float:left;position:relative}
.sf-menu a{display:block;position:relative}
.sf-menu li:hover ul,.sf-menu li.sfHover ul{left:0;top:3.6em;z-index:99}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:10em;top:0}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul{top:-999em}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul{left:10em;top:0}
.sf-menu{float:left}
.sf-menu a{padding:.75em 1em;text-decoration:none}
.sf-menu a,.sf-menu a:visited{color:#13a}
.sf-menu li{background:transparent}
.sf-menu li li{background:#f5cac0}
.sf-menu li li li{background:#f5cac0}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:hover{background:#6f383d;outline:0}
.sf-menu a:active{background:}
.sf-menu a:focus{outline:0}
.sf-menu a.sf-with-ul{padding-right:2.25em;min-width:1px;}
.sf-sub-indicator{position:absolute;display:block;right:.75em;top:1.05em;width:10px;height:10px;text-indent:-999em;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAIWvpKwlckBErOSFMP6WQmIts9wP_J1k_Ji6KcvrdfihPr1N7NZoHF_j2XxOhCWOTl8DnTCITg0jD7aIcr09G7C4Bf-HXGzztCLpWCQZlsz7-OrFs0btws4anoJU4TcurPgR-UtL1_JI/s1600/arrows-white.png) no-repeat -10px -100px;}
a > .sf-sub-indicator{top:.8em;background-position:0 -100px;}
a:focus > .sf-sub-indicator,a:hover > .sf-sub-indicator,a:active > .sf-sub-indicator,li:hover > a > .sf-sub-indicator,li.sfHover > a > .sf-sub-indicator{background-position:-10px -100px;}
.sf-menu ul .sf-sub-indicator{background-position:-10px 0}
.sf-menu ul a > .sf-sub-indicator{background-position:0 0}
.sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator{background-position:-10px 0;}
.sf-shadow ul{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUZ6GUKmlE8mY_oGlwxM6qWqEY2cVM_oJmbkge6wL0CrrrKAC4kbF4e0V6nWzqzIJ9qgb2Wd5d4J3Na-yudhwsPhxIfGD4kJF9eo-cErKzb5Xk8Dbw0tosrW_JtxBGtM-dlboiKGhiWA/s1600/shadow.png') no-repeat bottom right;padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.sf-shadow ul.sf-shadow-off{background:transparent}

SALVE!

em seguida,

Daí,

Optando pelo  menu acima da header (cabeçalho)

Procure pelo código:

 
<div id='header-wrapper'>

encontrando,

cole

 acima de

<div id='header-wrapper'>

<div id='menu-wrap'>
<div id='menu'>
<ul class='sf-menu'>
<li class='current-cat'><a href=' ENDEREÇO DE SEU BLOG' >INICIO/HOME</a></li>
<li><a href=' URL aqui '>Nome da página</a>

<ul>
<li><a href='URL aqui'>Nome da página</a></li>
<li><a href='URL aqui'>Nome da página1</a>
<ul>
<li><a href='URL aqui'>Nome da página2</a></li>
</ul>
</li>
<li><a href='URL aqui'>Nome da página3</a></li>
</ul>
</li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a>

<ul>
<li><a href='URL aqui'>TIT DA URL</a></li>
</ul>
</li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a>
<ul>
<li><a href='URL aqui'>TIT DA URL</a></li>
</ul>
</li>
</ul>

</div>
</div>
<div style='clear:both;'></div>
SALVE!

PRONTO

:)


Nota:

Optando pelo menu abaixo da header (cabeçalho)

Procure por:

<div id='content-wrapper'>

ao encontrar o código, 

 
cole  abaixo dele o código a seguir:

<div id='menu-wrap'>
<div id='menu'>
<ul class='sf-menu'>
<li class='current-cat'><a href=' ENDEREÇO DE SEU BLOG' >INICIO/HOME</a></li>
<li><a href=' URL aqui '>Nome da página</a>

<ul>
<li><a href='URL aqui'>Nome da página</a></li>
<li><a href='URL aqui'>Nome da página1</a>
<ul>
<li><a href='URL aqui'>Nome da página2</a></li>
</ul>
</li>
<li><a href='URL aqui'>Nome da página3</a></li>
</ul>
</li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a>

<ul>
<li><a href='URL aqui'>TIT DA URL</a></li>
</ul>
</li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a></li>
<li><a href='URL aqui'>TIT DA URL</a>
<ul>
<li><a href='URL aqui'>TIT DA URL</a></li>
</ul>
</li>
</ul>

</div>
</div>
<div style='clear:both;'></div>

SALVE!

PRONTO!

Leia Mais ►