Menu dropdown simples

Boa noite lindos, como vão? Muitas provas já? Confesso que em abril serão minhas provas do 1° bimestre e já estou de cabelo em pé porque eu leio, estudo e escuto o professor mas não entendo patavinas nenhuma =/ E pior de tudo é que cada vez mais vai ficando difícil e eu não sei como irei me sair lá frente. Mas nem quero colocar medo em vocês porque ainda é cedo haha deixa vocês passarem a fase do colegial primeiro dai vocês irão poder pensar na faculdade. É, vida de adulto não é fácil então aproveitem o agora pois é uma fase legal e bem especial.

Mudemos a página, hoje eu resolvi fazer um tutorial de um menu que irá ajudar muitas pessoas e é super necessário em blogs que necessitam de muitas abas para mostrar seus trabalhos ou por necessidade mesmo. Ajudei uma garota em seu blog e ela precisava de um menu dropdown que no caso é aqueles que quando você passa o mouse por cima além dos links já existentes ele mostra outros menus. Existem muitos sites ensinando a criar seus próprios menus dropdown mas não é tão simples pois a maioria está em inglês o que é um grande desafio por não entenderem o idioma e a explicação!

LIVE PREVIEW (**^-^)~

Para usá-lo vocês terão apenas que adicionar um gadget e colocar os códigos abaixo dentro:

<div style="position: absolute; margin-top: -60px;margin-bottom:0px; margin-left: 100px;z-index:1000;">
<style type="text/css">
#NavbarMenu {
background-color: #;
color: #000;
font-family: 'Oswald', sans-serif;
letter-spacing: 0px;
font-size: 18px;
text-transform: uppercase;
width: 100%;height: 35px;
font-weight: bold;margin: 0;padding: 0;
}
#NavbarMenuleft {
width: 100%;float: left;margin: 0;padding: 0;
}
#nav {
display: block;
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 {
background:#fff;
color: #000; /*--edite cor do link--*/
display: block;
font-family: 'Oswald';
letter-spacing: 0px;
font-size: 18px;
font-weight:300;
text-transform: uppercase;
margin: 0;padding: 9px 15px 8px;border-bottom: 1px solid #000;border-top: 1px solid #000;
}
#nav li a:hover, #nav li a:active {
color: #000; /*--edite cor do link hover--*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
border-bottom: 1px solid #;border-top: 1px solid #;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #000; /*--cor do link--*/
font-size: 14px;
font-family: 'Oswald';
letter-spacing: 0px;
font-size: 18px;
font-weight:300;
text-transform: uppercase;
float: none;
margin: 0;
padding: 7px 10px;
background-color: #;
border-bottom: 1px solid #fff;border-top: 1px solid #fff;
}
#nav li li a:hover, #nav li li a:active {
color: #fff; /*--cor do link--*/
padding: 7px 10px;
background-color: #000;
border-bottom: 1px solid #fff;border-top: 1px solid #fff;
}
#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;}
</style>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='endereço do blog'>Home</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>nome</a></li>
<li><a href='endereço do blog'>Contato</a></li>
<li>
<a href='url da pagina'>LINK</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK1</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK2</a>
<ul>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
<li><a href='url da pagina'>LINK</a></li>
</ul>
</li>
<li><a href='url da pagina'>LINK3</a>
<ul>
<li><a href='url da pagina'>Nome do Link </a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='url da pagina'>Nome do Link</a></li>
<li><a href='endereço do blog'>Contato</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div></div>

Salve e veja se está tudo certinho, vocês podem modificar ele a vontade, como cores da fonte, do fundo e o fundo dos submenus. Crédito a ferramentas para blogs pela base do menu.