Incrível Menu Vertical Deslizante (Dropdown) Apenas Com CSS/HTML

Neste tutorial irei mostrar como adicionar o menu no seu blog. Esse menu é bem interessante, pois, chama atenção com seus diferentes efeitos.

                  Seguir @DicashotBlogger

Faça login ► Clique em “Layout” e depois ► “Editar HTML”.

Procure pela tag

</head>

Cole o código ACIMA da tag

<style type="text/css">
ul.sidenav {
/* el rectángulo contenedor */
list-style: none;
margin: 0 auto;
padding: 0;
width: 250px;
/* propiedades optativas */
background-color: #CD853F;
border: 1px solid #300;
outline: 1px solid #FFF;
}
ul.sidenav li a {
/* el enlace de cada item */
display: block;
text-decoration: none;
/* propiedades optativas */
background: transparent url(URL_da_imagem_icone) no-repeat 5px 7px;
border-bottom: 1px solid #AD651F;
border-top: 1px solid #300;
color: #FFF;
font-size: 18px;
padding: 15px 10px 10px 45px;
width: 195px;
}
ul.sidenav li a:hover {
/* propiedades optativas */
background: #CD853F url(URL_da_imagem_icone) no-repeat 5px 7px;
border-top:1px solid #300;
}
ul.sidenav li span {
/* el contenido permanece oculto por defecto */
display: none;
}
ul.sidenav li a:hover span {
/* el contenido se muestra al pasar el cursor encima */
display: block;
/* propiedades optativas */
font-size: 12px;
padding: 10px 0;
margin: 0 0 0 -30px;
}
</style>

As partes destacadas em AZUL no código é a cor de fundo do menu.

Pode Salvar.

Agora vamos ao HTML:

Vá em Layout e clique em Adicionar um Gadget do tipo HTML/JavaScript e cole o seguinte código:

<ul class.="sidenav">
<li>
<a ref.="URL_DO_O_LINK">Home <spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Blog <spam> 
Blandit turpis patria euismod at iaceo appellatio, 
</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Tutorial <spam>
Blandit turpis patria euismod at iaceo appellatio,.</spam> </a>
</li>
<li>
<a ref.="URL_DO_O_LINK">Arquivo<spam> 
Blandit turpis patria euismod at iaceo appellatio, </spam> </a>
</li>
</ul>

Em azul o endereço para direcionamento;
Em negrito o nome do link;
Em vermelho, o texto que se aparecerá ao passar o mouse.

Faça as alterações, salve e pronto!!!