Menú Vertical con Subpestañas hecho solamente con CSS

Esto es un menú vertical con subpestañas hecho sólo con CSS, no tiene Javascript o y nada de alguna librería, así que para aquellos que les gustan mas las cosas simples esta es una gran opción para organizar las etiquetas del blog o cualquier enlace.

• 
  

Colocarlo es bastante fácil, sólo entra en Plantilla | Edición de HTML y antes de 
]]></b:skin> pega los siguientes estilos:

/* Menú vertical con subpestañas

----------------------------------------------- */

#menuvertical {

text-align: center;

width:100%;

}

#menuvertical ul { list-style-type: none; padding:0;}

#menuvertical ul li.nivel1 {

width: 162px; /* Ancho de las pestañas */

}

#menuvertical ul li.primera {

border-top: solid 1px #FFF; /* Borde superior de la primera pestaña */

}

#menuvertical ul li {padding:0;}

#menuvertical ul li a {

display: block;

text-decoration: none;

color: #fff; /* Color del texto */
background-color: #045FB4; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */

border-top: none;

padding: 8px;

position: relative;

}

#menuvertical ul li:hover {

position: relative;

color: #000; /* Color del texto al pasar el mouse */

}

#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {

background-color: #6E6E6E; /* Color de fondo al pasar el mouse */

color: #000;

position: relative;

}

#menuvertical ul li a.nivel1 {

display: block !important;

display: none;

position: relative;

}

#menuvertical ul li ul {

display: none;

}

#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {

display: block;

position: absolute;

left: 161px;

top: -1px;

}

#menuvertical ul li ul li a {

width: 160px;

background-color: #045FB4; /* Color de fondo subpestañas */
color: #fff; /* Color del texto subpestañas */

}

#menuvertical ul li ul li a:hover {

position: relative;

background-color: #6E6E6E; /* Color de fondo al pasar el mouse subpestañas */
color: #000; /* Color del texto al pasar el mouse subpestañas */

}

Ahora entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega lo siguiente:

<div id="menuvertical">

<ul>

<li class="nivel1 primera"><a href="#" class="nivel1">Pestaña 1</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 1.A</a></li>
<li><a href="URL del enlace">Pestaña 1.B</a></li>

</ul>

</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 2</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 2.A</a></li>
<li><a href="URL del enlace">Pestaña 2.B</a></li>
<li><a href="URL del enlace">Pestaña 2.C</a></li>
<li><a href="URL del enlace">Pestaña 2.D</a></li>
<li><a href="URL del enlace">Pestaña 2.E</a></li>

</ul>

</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 3</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 3.A</a></li>
<li><a href="URL del enlace">Pestaña 3.B</a></li>
<li><a href="URL del enlace">Pestaña 3.C</a></li>

</ul>

</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 4</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 4.A</a></li>
<li><a href="URL del enlace">Pestaña 4.B</a></li>
<li><a href="URL del enlace">Pestaña 4.C</a></li>
<li><a href="URL del enlace">Pestaña 4.D</a></li>

<li><a href="URL del enlace">Pestaña 4.E</a></li>

<li><a href="URL del enlace">Pestaña 4.F</a></li>

</ul>

</li>

<li class="nivel1"><a href="#" class="nivel1">Pestaña 5</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 5.A</a></li>
<li><a href="URL del enlace">Pestaña 5.B</a></li>

</ul>

</li>

</ul> 

</div>

Agrega la URL de los enlaces donde se indica y listo. Si quieres agregar otra pestaña SIN subpestañas entonces añade antes de </ul> esta línea:

<li class="nivel1"><a href="URL del enlace" class="nivel1">Pestaña 6</a></li>

Si quieres agregar una pestaña CON subpestañas entonces añade antes de </ul> lo siguiente:

<li class="nivel1"><a href="#" class="nivel1">Pestaña 6</a>

<ul>

<li class="primera"><a href="URL del enlace">Pestaña 6.A</a></li>
<li><a href="URL del enlace">Pestaña 6.B</a></li>
<li><a href="URL del enlace">Pestaña 6.C</a></li>
<li><a href="URL del enlace">Pestaña 6.D</a></li>

</ul>

</li>

A las SubPestañas (Pestaña 6.D,Pestaña 1.B,Pestaña 4.D,Pestaña 2.D,Etc...) les pueden poner el nombre que quieran no necesariamente tiene que ser con esos nombres.

No es un menu con mucho Diseño pero es bastante util a la hora de organizarnos.