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.

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.

About Odnei Sales

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.