EL MENU

El menú vertical desplegable con efecto deslizante con subpestañas de la barra lateral lo hice de la siguiente forma:
Lo primero que hice fué insertar el script en la plantilla, para ello entré en Diseño | Edición de HTML y antes de </head> agregué lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PuTS68KFd9Y5RucvHJKW9YGkqIWZl04oGPBcAVvf5aCSBuVTBlmZMLbGl0rgB4B5nMSh9xgUSxI3gdGg3igG4Ws2xmid2Vt5Kjc89fj0Yp8KrCDHXIRESa8Sgab4VsrTNHYX-LIVbZg/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKjr1nZWDZ2K711q2UDbtj5m5iK531tPwFRMwlud1FiyZPcFoTgK31UZHGjSFA2JwO2XR9huUra5lqme3YCbzA9V-TrhGtvXlSnOvYHOHSlr0wI8rMxWC9KNPGnR344kmy86lvlvOmqY/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PuTS68KFd9Y5RucvHJKW9YGkqIWZl04oGPBcAVvf5aCSBuVTBlmZMLbGl0rgB4B5nMSh9xgUSxI3gdGg3igG4Ws2xmid2Vt5Kjc89fj0Yp8KrCDHXIRESa8Sgab4VsrTNHYX-LIVbZg/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKjr1nZWDZ2K711q2UDbtj5m5iK531tPwFRMwlud1FiyZPcFoTgK31UZHGjSFA2JwO2XR9huUra5lqme3YCbzA9V-TrhGtvXlSnOvYHOHSlr0wI8rMxWC9KNPGnR344kmy86lvlvOmqY/)"});
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> añadí los estilos:

/* Menú vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del menú */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pestañas principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzKjr1nZWDZ2K711q2UDbtj5m5iK531tPwFRMwlud1FiyZPcFoTgK31UZHGjSFA2JwO2XR9huUra5lqme3YCbzA9V-TrhGtvXlSnOvYHOHSlr0wI8rMxWC9KNPGnR344kmy86lvlvOmqY/);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}

Por último entré en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, y ahí pegué la estructura del menú.
Si quieres que se active al hacer click pegas este código:

<div id="firstpane" class="menu_list">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>

Si quieres el que se active al pasar el cursor entonces pegas este código:

<div class="menu_list" id="secondpane">

<p class="menu_head">Pestaña 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>

<p class="menu_head">Pestaña 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pestaña 1</a>
<a href="URL del enlace">Sub pestaña 2</a>
<a href="URL del enlace">Sub pestaña 3</a>
</div>


</div>