Sub-menus en blogger

Muchos blogs, tienen varias categorías, demasiadas como para agregarlas todas en un simple menú horizontal. Lo que uno puede hacer en este caso es crear 5 o 6 categorías generales y crear subcategorías de cada categoría para hacer todo más navegable. Eso lo podemos hacer con CSS y HTML. Es muy sencillo hacerlo, pero recomiendo que presten bastante atención. Pueden ver un ejemplo de como queda en mi blog de pruebas.

[1] Vamos a Diseño > Edición de HTML y pegamos esto antes de ]]</b:skin>:

/* MENU DOS (Robs)
----------------------------------------------- */
#subnavbar {
background: #13367e;      /* fondo del menú */
width: 660px;      /* ancho del menú */
height: 27px;      /* alto del menú */
font-weight:bold;
color: #FFFFFF;      /* color del texto */
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;      /* color del enlace */
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;      /* borde de las pestañas */
}
#subnav li a:hover, #subnav li a:active {
background: #1c71b3;      /* fondo de la pestaña al pasar el cursor */
color: #ffffff;      /* color del enlace al pasar el cursor */
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #13367e;      /* fondo del submenú */
width: 120px;      /* ancho del submenú */
heigth: 20px;      /* ancho de las pestañas del sumenú */
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;      /* borde inferior de las pestañas del submenú */
border-left: 1px solid #FFFFFF;      /* borde izquierdo de las pestañas del submenú */
border-right: 1px solid #FFFFFF;      /* borde derecho de las pestañas del submenú */
}
#subnav li li a:hover, #subnav li li a:active {
background: #1c71b3;      /* fondo de la pestaña del submenú al pasar el cursor */
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}

[2] Ahora lo único que nos queda hacer es pegar esto en un nuevo elementoHTML/Javascript:

<div id="subnavbar">
<ul id="subnav">

<li><a href="Url del blog" title="Inicio">Inicio</a>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">Contacto</a>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a>
<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>
</li>
<li><a href="" title="Pestaña">Pestaña</a>

<ul>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
<li><a href="" title="Sub-pestaña">Sub-pestaña</a>
</li>
</ul>

</li></ul></div>

Modificaciones:

• Donde dice Pestaña, modificamos el nombre que tendrá la pestaña principal.
• Donde dice Sub-pestaña, modificamos los submenus que aparecen al pasar el cursor por encima de cualquier pestaña. Y donde dice href="" colocamos la url de cada pestaña y sub-pestaña entre las comillas.