Colocando um menu suspenso profissional na Blogger

Os menus suspensos são muito importantes em blogs e esses tipos de menus também são consideráveis para os visitantes porque o visitante quando em primeiro lugar ver os seus menus e outros widgets e se ele gostar, em seguida, ele desejará visitar novamente o conteúdo também é muito importante para o cada blog.

• Home
• Tutoriais
  • HTML / CSS
  • JS / jQuery
    • jQuery
    • JS
  • Menu Vertical
  • Menu Horizontal
  • Menu Supenso
  • Menu Flutuante
• Categorias
  • Categorias1
    • Subcategorias1
    • Subcategorias1
    • Subcategorias1
    • Subcategorias1
  • Categorias2
    • Subcategorias2
    • Subcategorias2
    • Subcategorias2
• Sobre
• Termos

Então vamos aprender como adicionar um menu suspenso ao Blogger:

1. Faça o login no Blogger

 

2. Vá no menu lateral e selecione Layout

3. Adicione um gadget HTML / JavaScript 

4. Cole o código abaixo nele.

<style> #menunav { display:inline-block; width:100%; margin:0px auto; padding:0; background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuSO-qAP8xWiypnPtkfepRL1jep1ipg4ehaBknQBNxlqA9ElD3_O5UyHqXTIIRnfyKCGK4drQgy3npDKd91r6voILvCXK5lyFGT_jvzAiIogzVvyKbGxSFkFz0nr2gc3O0g_PQ_amznLd/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px;  -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); }> #menunav li { margin:10px; float:left; position:relative; list-style:none; } #menunav a { font-family:verdana; font-weight:bold; color:#e7e5e5; text-decoration:none; display:block; padding:8px 20px;border-radius:10px;  -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, .7); } #menunav .current a, #menunav li:hover > a { background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuSO-qAP8xWiypnPtkfepRL1jep1ipg4ehaBknQBNxlqA9ElD3_O5UyHqXTIIRnfyKCGK4drQgy3npDKd91r6voILvCXK5lyFGT_jvzAiIogzVvyKbGxSFkFz0nr2gc3O0g_PQ_amznLd/s320/bg-ABT.png) repeat-x 0 -20px; color:#000; border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7);  -moz-box-shadow:0 2px 2px rgba(0,0,0, .7); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7); text-shadow:0 2px 2px rgba(255,255,255, 0.7); } #menunav ul li:hover a, #menunav li:hover li a { background:none; border:none; color:#000; } #menunav ul li a:hover { background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuSO-qAP8xWiypnPtkfepRL1jep1ipg4ehaBknQBNxlqA9ElD3_O5UyHqXTIIRnfyKCGK4drQgy3npDKd91r6voILvCXK5lyFGT_jvzAiIogzVvyKbGxSFkFz0nr2gc3O0g_PQ_amznLd/s320/bg-ABT.png) repeat-x 0 -100px; color:#fff;border-radius:10px;  -moz-border-radius:10px; -webkit-border-radius:10px; text-shadow:0 2px 2px rgba(0,0,0, 0.7); }#menunav ul li:first-child > a { -moz-border-radius-topleft:10px;  -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } #menunav ul li:last-child > a { -moz-border-radius-bottomleft:10px;  -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; } #menunav li:hover > ul { opacity:1; visibility:visible; } #menunav ul { opacity:0; visibility:hidden; padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuSO-qAP8xWiypnPtkfepRL1jep1ipg4ehaBknQBNxlqA9ElD3_O5UyHqXTIIRnfyKCGK4drQgy3npDKd91r6voILvCXK5lyFGT_jvzAiIogzVvyKbGxSFkFz0nr2gc3O0g_PQ_amznLd/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; 
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#menunav ul li {
float:none;
margin:0;
}
#menunav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#menunav ul ul {
left:160px;
top:0px;
}
</style> 
    <ul id="menunav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutoriais</a>             <ul>
                <li><a href="#">HTML / CSS</a></li>                 <li><a href="#">JS / jQuery</a>                     <ul>                         <li><a href="#">jQuery</a></li>                         <li><a href="#">JS</a></li>                     </ul>                 </li>                 <li><a href="#">Menu Vertical</a></li>                 <li><a href="#">Menu Horizontal</a></li>                 <li><a href="#">Menu Supenso</a></li>                 <li><a href="#">Menu Flutuante</a></li>             </ul>         </li>         <li><a href="#">Categorias</a>             <ul>                 <li><a href="#">Categorias1</a>                     <ul>                         <li><a href="#">Subcategorias1</a></li>                         <li><a href="#">Subcategorias1</a></li>                         <li><a href="#">Subcategorias1</a></li>                         <li><a href="#">Subcategorias1</a></li>                     </ul>                 </li>                 <li><a href="#">Categorias2</a>                     <ul>                         <li><a href="#">Subcategorias2</a></li>                         <li><a href="#">Subcategorias2</a></li>                         <li><a href="#">Subcategorias2</a></li>                     </ul>                 </li>             </ul>         </li>         <li><a href="#">Sobre</a></li>         <li><a href="#">Termos</a></li>     </ul>

Nota:

Substitua # por seu link.

Substitua toda a Área Verde pelo nome do menu a ser exibido.