Como criar Menus com Submenus no Blogger (Blogspot)

Imagem / Reprodução: hostinger

Evolução dos Sites

Estamos em uma época onde a evolução de design nos sites estão cada vez mais constantes, estamos sempre atualizando, criando e inovando, seja por Templates prontos ou por edição manual em HTML. Os submenus e menus fazem parte dessa transformação, sendo possível filtrar e organizar seu conteúdo.

Como criar Submenus no Blogger

Hoje vamos ensiná-los uma maneira bem simples de como criar submenus no Blogger através de um código HTML, ele funciona tanto em Blog com templates de terceiros como templates padrão.

Download do Código HTML a ser usado no vídeo

Download do melhor editor HTML :

NotePad++

Ou, você pode copiar  e colar o código :

<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></li>
    <li><a href="#">Menu3</a></li>
    <li><a href="#">Menu4</a></li>
  </ul>

</div>

Confira a vídeo aula logo abaixo e tire suas dúvidas.