Código para inserir Submenus em seu blogspot


Copie e insira este script abaixo da tag </header> dentro do código HTML do seu blog. Para isso, entre dentro painel editor HTML do blogger que está dentro da guia TEMA.

Evite copiar e colar o código direto em seu blog. Minha sugestão é que você copie o código abaixo e cole em um bloco de notas. Depois recorte do bloco de notas para o seu blogspot. Assim você evita erros. 

Abaixo está o Script para você copiar:

---------------------------------------------


<style type="text/css">
  *, *:after, *:before{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
   font-size: 14px;
   line-height: 1.5;
 }
 .menu{
   background: #000;
 }
 .menu .menu-list, .menu .sub-menu{
   list-style: none;
 }
 .menu a{
   color: #fff;
   text-decoration: none;
   display: block;
   cursor: pointer;
   text-transform: uppercase;
   font-size: 12px;
   font-weight: 700;
   letter-spacing:0.2em;
 }
 .menu > .menu-list > li{
   float: left;
   position: relative;
 }
 .menu > .menu-list > li > a {
   padding: 20px;
   margin: 0 5px;
   background: #000;
 }
 .menu > .menu-list > li:hover a {
   background: #444;
 }
 .menu > .menu-list > li:hover > .sub-menu {
   display: block;
 }
 .menu > .menu-list > li > .sub-menu {
   position: absolute;
   top: 50px;
   left: 5px;
   background: blue;
   min-width: 200px;
   z-index: 1000;
   display: none;
 }
 .menu > .menu-list > li > .sub-menu > li > a {
  padding: 10px 20px;
 }
 .menu:after {
   content: '.';
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
 }
 .site-content{
   padding: 20px;
 }
 h1{
   font-size: 22px;
   margin: 0 0 0.6em 0;
   letter-spacing:0.2em;
   color: #444;
 }
 p{
   margin: 0 0 1.6em 0;
 }
</style>
<div class="menu">
  <ul class="menu-list">
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Menu1</a>
       <ul class="sub-menu">
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>
    </li>
   <li>
      <a href="#">Menu2</a>
       <ul class="sub-menu">
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
      </ul>
    </li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
    <li><a href="#">Menu5</a></li>
  </ul>
</div>

---------------------------------------------
Conteúdo complementar


Veja outros conteúdos em nosso Canal no Youtube

Compartilhe:

Fale conosco:

Nome

E-mail *

Mensagem *