Menu Dropdown 
Autor: Gleicy - Web gleicy | Publicado: 2012-12-17T03:13:00-08:00




Oi pessoal tudo bem com vocês ? &nbsp;kk , hoje tou trazendo mais um tutorial &nbsp;, so que esse é de menu , acho que eu ja dei aqui no blog né?
Bom &nbsp;, esse menu é igual ao do trechy teen



Veja como o menu fica:







Vantagens

Ele deixa seu blog mais organizado, dá para colocar todo conteúdo do seu blog e muito mais, você pode adicionar mais links em cada menu, alterar cor e liberar o espaço de um menu na coluna lateral do blog para outras coisas, e vamos combina fica bem legal não é?



Importante

Antes de ir conferir o tutorial, salve seu template original em seu pc, caso você não tenha sucesso, dê algum erro e tal basta substituir o errado pelo original.&nbsp;



O tutorial que eu usei&nbsp;foi&nbsp;este aqui&nbsp;muito simples e tem apenas dois códigos. O menu vai ficar com um design diferente do meu, mas basta você personalizar as cores do código ou usar o código abaixo já personalizado por mim ao invés do primeiro código lá do tutorial:




/* NavbarMenu

--------------------------- */

#NavbarMenu {

background: #000; *--Coloque a cor de fundo do menu--*

width: 100%; height: 39px;

font-size: 12px;

font-family: Arial, Tahoma, Verdana;

color: #FFF;/*--cor do link--*/

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; /*--edite cor do link--*/

display: block;

font-size: 16px;/*--tamanho da fonte do link--*/

font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;

margin: 0;padding: 9px 15px 8px;

}

#nav li a:hover, #nav li a:active {

background:;

color:#F5277A; &nbsp;/*--edite cor do link hover--*/

margin: 0;padding: 9px 15px 8px;text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background:#E7426A;/*--cor de fundo--*/

width: 150px;

color: #FFF; /*--cor do link--*/

font-size: 14px;font-family: Georgia, Times New Roman;font-weight: normal;text-transform: capitalize;

float: none;margin: 0;padding: 7px 10px;

}

#nav li li a:hover, #nav li li a:active {

background#F12C8B;/*--cor de fundo hover--*/

color: #000; /*--cor do link--*/

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;}



Bom, é bem simples, aconselho que vocês tentem colocar o menu antes em um blog de testes e ver como é e tal.&nbsp;



&nbsp;Dicas Extras



Ao editar o segundo código do menu onde você coloca os link e sub links é preciso ter atenção, porque qualquer errinho, código apagado o menu vai ficar todo louco, veja como editar:



Cada conjunto do código abaixo representa um link e seus sub links do menu:



&lt;a href='ENDEREÇO DO SEU LINK AQUI'&gt;Dicas&lt;/a&gt; --&nbsp;link principal&lt;ul&gt;&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Moda&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Seu blog&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Beleza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Compras&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Filmes&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;



as únicas coisas que você precisa editar são as partes coloridas do código, veja:



Vermelho:&nbsp;É o link principal do menu onde as pessoas passam o mouse e ai sim, aparecerem os submenus

Lilás:&nbsp;Você coloca o link que o sub link deve direcionar.

Roxo:&nbsp;Coloque o nome do sub link.



Para adicionar mais links a cada sub menu,&nbsp;basta repetir o código abaixo antes de:&nbsp;&lt;/ul&gt;&lt;/li&gt;



&lt;li&gt;&lt;a href='ENDEREÇO DO SEU SUBLINK AQUI'&gt;Filmes&lt;/a&gt;&lt;/li&gt;



E issso .

Creditos: Trechy Teen