Menu Drop Down Pink

amazing, awesome, colorful, donut, dunkin donut, food, frosting, good, pink, rainbow, sprinkles, yummy

E aí pessoal? Cada dia mais se aproxima do ENEM, me desejem sorte *--* realmente sinto muito não poder estar postando, mas quando toda essa maré passar eu irei voltar com tudo podem ter certeza u_u enquanto isso, cliquem em Leia Mais e confira este tutorial que eu costumo usar com alguma frequência aqui no UT ^^


Resultado:



Mãos na massa pessoal? Vamos começar pelo css do menu (está tudo explicadinho do lado de cada item):

 1  Passo: Editar e instalar o css no seu blog

#NavbarMenu {
background: url(http://4.bp.blogspot.com/-ZvncrW9c3mo/UTZZRL2DfCI/AAAAAAAAA6s/CK9ez3_2r6E/s000/menu.png); /* Imagem de Fundo (você pode colocar uma cor) */
width: 100%; /* Largura do menu */
height: 35px; /* Altura do menu */
margin: 0; /* Não altere */
padding: 0; /* Não altere */
}
#NavbarMenuleft {
width: 100%; /* Largura do menu */
float: left; /* Flutuar a esquerda */
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; /* Flutuar a esquerda */
list-style: none; /* Não altere */
margin: 0; /* Não altere */
padding: 0; /* Não altere */
}
#nav li { /* Não altere nada aqui */
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /* Cor da fonte do Menu */
display: block; /* Não altere */
font-size: 16px; /* Tamanho da Fonte */
text-decoration:none; /* Não altere */
font-family: Tahoma, Georgia, Times New Roman; /* Estilo da Fonte */
font-weight: normal; /* Coloque no lugar de "normal", "bold" caso queira em negrito */
margin: 0; /* Não altere */
padding: 8px 15px 8px; /* Dimensões (recomendo não alterar) */
}
#nav li a:hover, #nav li a:active {
color: #FFC0CB; /* Cor da Fonte do menu hover */
background:#bc0747; /* Cor de fundo do menu hover */
margin: 0; /* Não altere */
padding: 8px 15px 8px; /* Dimensões (recomendo não alterar) */
text-decoration: none; /* Links sem sublinhado */
}
#nav li li a {
border:none; /* Não altere */
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #1c1c1c; /* Cor de fundo do submenu */
width: 150px; /* Largura do submenu */
color: #FFF; /* Cor da fonte do sumenu */
font-size: 14px; /* Tamanho da fonte do submenu */
font-family: Tahoma, Georgia, Times New Roman; /* Fonte do submenu */
font-weight: normal; /* Coloque no lugar de "normal", "bold" caso queira em negrito */
float: none; /* Não altere */
margin: 0; /* Não altere */
padding: 7px 10px; /* Dimensões (recomendo não alterar) */
}
#nav li li a:hover, #nav li li a:active {
background: #777; /* Cor de fundo do submenu hover */
color: #FFF; /* Cor da fonte do submenu hover */
padding: 7px 10px; /* Dimensões (recomendo não alterar) */
}
#nav li { /* Não altere nada aqui */
float: left;
padding: 0;
}
#nav li ul { /* Não altere nada aqui */
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px; /* Deve possuir a mesma largura do sumenu */
margin: 0;
padding: 0;
}
#nav li ul a { /* Não altere */
width: 170px;
}
#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 { /* Não altere */
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;} /* Não altere */
#nav li:hover, #nav li.sfhover {
position: static; /* Não altere */
background:#bc0747; /* Cor de fundo do menu hover */
color: #FFC0CB; /* Cor da Fonte do menu hover */
}

Você deve colar este código acima de ]]></b:skin> e clicar em   SALVAR   e pronto.


 2  Passo: Editar e instalar o css no seu blog

Agora, vamos instalar o menu, procure por <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/> e abaixo disso, cole este código:

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Moda</a></li>
<li>
<a href='#'>Beleza</a>
<ul>
<li><a href='#'>Cabelo</a></li>
<li><a href='#'>Maquiagem</a></li>
<li><a href='#'>Unhas</a></li>
</ul>
</li>
<li><a href='#'>Você</a>
<ul>
<li><a href='#'>Dicas</a></li>
<li><a href='#'>Comportamento</a></li>
<li><a href='#'>Namoro</a></li>
<li><a href='#'>Garotos</a></li>
<li><a href='#'>Escola</a></li>
</ul>
</li>
<li><a href='#'>Blogs</a>
<ul>
<li><a href='#'>Redação</a></li>
<li><a href='#'>Tutoriais</a></li>
<li><a href='#'>HTML e CSS Code</a></li>
<li><a href='#'>Papo Cabeça</a></li>
<li><a href='#'>TOP5</a></li>
</ul>
</li>
<li><a href='#'>Diversão</a></li>
<li><a href='#'>Testes</a></li>
<li><a href='#'>Horóscopo</a></li>
<li><a href='#'>TV</a></li>
<li><a href='#'>Revista</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>

Altere os links como desejar. Espero que tenham gostado do tutorial!