Menu simples Dropdown (com submenu)

Konnichiwa fadinhas e elfos! Como estão? Desculpe meu sumiço, ainda é pelo mesmo motivo, mas enfim, hoje resolvi trazer tutorial de html/css, como fazer um menu drop-down no blogger. Eu acho super útil e estou pensando seriamente em usar também. As vezes compartilhamos tantos temas nos nossos blogs e acaba não tendo espaço para adicionar tudo, mas com um menu assim fica super mais simples, eaí quer ver como faz? Let's go?

Menu:

Ele fica como esse menu acima. 

Para colocar ele no seu blog, você vai precisar ir em layout, adicionar um gadget javascript/html e nele colar o seguinte código:

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">HOME</a></li> 
<li><a href="LINK2">CATEGORIA</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORIA-1</a></li>
<li><a href='LINK4'>SUB-CATEGORIA-2</a></li>
</ul>
</li>
<li><a href="">CATEGORIA</a></li>
</ul>
</div>   
<!--End Navigation -->

Aonde estão nomeados ''Link'' adicione o link da sua categoria/tag . A primeira CATEGORIA , é a que está com submenus, então coloque o link de submenu em SUB-CATEGORIA-1 E SUB-CATEGORIA-2 , você pode adicionar mais se quiser, ou até mesmo mudar a ordem.
Lembrando que <li> são os links principais e o <ul> é sublinks .

Agora vamos personaliza-lo!
Vá em tema , editar html e procure por /b:skin , após encontra-lo cole acima dele o seguinte código:

/* Estilo do primeiro link do menu */

.tabs-inner .section:first-child ul {

margin-top: -1px;

border: none;

}



/* Estilo da barra de navegação geral */

.tabs-inner .widget ul {

background: #F8E6E0;

border: none;

text-align: center;

}

/* Estilo dos links individual*/

.tabs-inner .widget li a {

font: 12px Arvo;

border: none;

color: #ffffff;

}

/* Estilo dos links com hover */

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #F8E6E0;

background-color: #ffffff;

text-decoration: none;

}



#navigationbar {

width: 100%; /* alterar a largura da barra de navegação */

height: 35px; /* alterar a altura da barra de navegação */

}



#navigationcss { 

margin: 0 auto;

padding: 0; 

}



#navigationcss ul { 

float: none; 

list-style: none; 

margin: 0; 

padding: 0; 

overflow: visible; 

}



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

color: #000; /* alterar a cor dos links principais */

display: block;

margin: 0;

padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */

}



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

color: #F8E6E0 ; /* altere a cor dos links quando está com mouse encima*/

margin: 0;

padding: 10px 30px; /* Certifique-se de que estes sejam os mesmos que a seção acima! */

}



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

background: #F8E6E0;  /* altere a cor de fundo da caixa suspensa */

width: 150px;

color: #000000; /* altere a cor dos links suspensos */

float: none;

margin: 0;

padding: 7px 10px; /* semelhante ao acima, altere o espaçamento em torno dos links */

}



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

background: #F8E6E0 ; /*altere a cor de fundo dos itens suspensos no hover*/

color: #fff; /* altere a cor dos links suspensos no hover */

padding: 7px 10px;  /*mantenha o mesmo que a seção acima */

}



#navigationcss li {

float: none; 

display: inline-block; 

list-style: none; 

margin: 0; 

padding: 0; 

}



#navigationcss li ul { 

z-index: 9999; 

position: absolute; 

left: -999em; 

height: auto; 

width: 150px; 

margin: 0;

padding: 0;

}



#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 

left: auto; 

} 

Você pode alterar tudo que quiser, está tudo explicado no proprio css para ajudar vocês.
Caso queira alterar as cores você vai precisar trocar por Hexadecimal (#'s) , para saber as cores , recomendo consultar esse site aqui Códigos de cores HTML INFO . E prontinho! Qualquer dúvida é só deixar nos comentários ok?

OFF: Viram que o blog está de aparência nova? Halloween chegandoo! Resolvi voltar com layouts temáticos, o que acharam? Falta terminar algumas coisinhas ainda hehe, e vou responder todos amanhã, fique de olho!

Por hoje é só, espero que tenham gostado do post! Me segue lá no instagram, as vezes posto stories x'D
Terá postagem toda segunda, quarta e sexta! Então segue o bloguinho e visite sempre! Até mais, Kissus! 

Facebook | Twitter | We heart It | Bloglovin | Pinterest *