CSS3 Puro com Menu Drop Down Multi-nivel

Adicionando um belo menu drop-down para o blog aumenta a beleza. Os Menus também ajudam os seus leitores a navegar facilmente através blog além de possibilitar que um único visitante veja mais páginas do seu site do que ele inicialmente teria visto caso haja dificuldade de navegação. Isso também é projetado com o uso de CSS3 puro como nós compartilhamos anteriormente. Este menu foi desenhado por Nick La do site webdesignerwall. Como sempre, eu tentei o meu melhor para explicar em um passo a passo o processo de instalação. Então, você só terá o trabalho de copiar e colar o código. Você pode adicionar esse menu como um widget HTML / JavaScript para que você não tenha editar o seu modelo :). Vamos ver como adicioná-lo ao blogger abaixo. 

Como Adicionar CSS3 Menu Suspenso Para O Blogger?

• Vá para o Painel do Blogger> Projeto> Layout. (Em novo Painel de Interface do Usuário> Layout)
• Clique em adicionar um Gadget que aparece  logo abaixo do cabeçalho (veja imagem abaixo)

(Nota - Se você não tem layout como na imagem acima deixe um comentário com o seu URL do blog eu irei ajudá-lo) 

• Cole o código abaixo,

<style>
#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -110px;
    line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    width: 100%
}

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
    font-family: calibri;
}


/* main level link */
#nav a {
    font-weight: bold;
    color: #e7e5e5;
    text-decoration: none;
    display: block;
    padding: 8px 20px;
    margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
    text-shadow: 0 1px 1px rgba(0,0,0, .3);
}

#nav a:hover {
    background: #000;
    color: #fff;
}

/* main level link hover */
#nav .current a, #nav li:hover > a {
    background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -40px;
    color: #444;
    border-top: solid 1px #f8f8f8;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
    box-shadow: 0 1px 1px rgba(0,0,0, .2);
    text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#nav ul a:hover {
    background: #0078ff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* dropdown */
#nav li:hover > ul {
    display: block;
}

/* level 2 list */
#nav ul {
    display: none;
    margin: 0;
    padding: 0;
    width: 185px;
    position: absolute;
    top: 35px;
    left: 0;
    background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGcAnZeGhBVXVR2t3tJHochEKgnSl_ljXVDBZgyaQeUmDEGX_ZnC033wgL9l-Byp6PqOQ7P4ykYe3MOh5zUs9pmIvH_-4nT1SbC15YdRzrsr0EujmQNRJrPgfv7RHUuJSs2J6QLqz9Uaw/s1600/hb-gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
    box-shadow: 0 1px 3px rgba(0,0,0, .3);
}

#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}

#nav ul a {
    font-weight: normal;
    text-shadow: 0 1px 0 #fff;
}

/* level 3+ list */
#nav ul ul {
    left: 181px;
    top: -3px;
}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;
    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}

#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#nav {
    display: inline-block;
}

html[xmlns] #nav {
    display: block;
}

* html #nav {
    height: 1%;
}
</style>
<ul id="nav">
  <li>
            <a href="http://www.helperblogger.com/">Home</a>
        </li>
        <li>
            <a href="#">Folder 0</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Folder 1</a>
            <ul>
                <li>
                    <a href="#">Sub Item 1.1</a>
                </li>
                <li>
                    <a href="#">Sub Item 1.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
        <li>
            <a href="#">Folder 2</a>
            <ul>
                <li>
                    <a href="#">Sub Item 2.1</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.helperblogger.com/">Create This</a>
        </li>
    </ul>
Agora substitua os # com seus links e mude Pasta1, Pasta2 assim por diante com o texto que você quer que apareça no menu. 

Personalizações

Nota - eu recomendo que você use um editor de HTML para fazer suas mudanças. 

Precisa de Mais Ajuda?

Muitos blogueiros novatos encontram problemas ao executar tarefas simples como esta na adição de links e textos. Se você está tendo problemas, para fazer isso basta fazer uma esquema como se fosse uma árvore, todavia se eu notar que muita gente está tendo o problemas eu posso fazer um vídeo ensinando como criar. Sinta-se livre para me perguntar qualquer coisa.