Menú vertical despegable

Bueno tonteando en Google encontre este tuto que me gusto asi que pedi ponerlo aqui....

Tanto los colores de fondo del menú como el color del texto o el borde puede editarse, logrando así que conjunte sin problemas con cualquier plantilla.

Diseño>Edición de HTML>expandimos artilugios

Localiza la etiqueta </head> y añade estas líneas justo antes: 

 

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/> 

 Guarda la plantilla una vez hayas finalizado la edición. Ahora salimos de ahi...

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior: 

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="#">Pestaña 4.1 </a></li>
<li><a href="#">Pestaña 4.2 </a></li>
<li><a href="#">Pestaña 4.3 </a></li>
</ul>
</li>
</ul>
</div>

 Guarda el gadget una vez hayas terminado.