Lo primero que hacemos es esto:
1) Vamos a Plantilla
2) Luego a edición de HTML/continuar.
3) Buscamos el siguiente código: ]]></b:skin> (Les recuerdo que con control+F abren el buscador)
4) Y pegamos antes de ]]></b:skin> lo siguiente:
#menudrop, #menudrop ul, #menudrop ul li,
#menudrop ul li ul, #menudrop ul li ul li {
margin:0;
padding:0;
}
#menudrop{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
}
#menudrop li{
float:left;
margin-right:10px;
position:relative;
}
#menudrop a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#menudrop a:hover{
color:#fff;
background:#246F49;
text-decoration:underline;
}
#menudrop ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px; /* Escondemos inicialmente los submenús */
}
#menudrop ul li{
padding-top:1px; /* Separación vertical entre elementos */
float:none;
}
#menudrop ul a{
white-space:nowrap; /* Separa los elementos en diferentes líneas */
}
#menudrop li:hover ul{
left:0; /* Submenús visibles */
}
/* Para que cuando se mueva el cursor por los elementos del submenú los elementos permanecen visibles */
#menudrop li:hover a{
background:#246F49; /* Aprovechamos para cambiar de color los señalados */
text-decoration:underline;
}
#menudrop li:hover ul a{
text-decoration:none;
}
#menudrop li:hover ul li a:hover{
background:#333;
}
Si quieren pueden cambiarle los estilos, es decir, los colores, tamaños, fuentes, etc.
Una vez pegado los estilos procedemos a colocar el código HTML, lo podemos hacer en una entrada o bien en un gadget HTML Javascript como les expliqué anteriormente.
<ul id="menudrop">
<li><a href="javascript:void();">Inicio</a></li>
<li><a href="javascript:void();">Pestaña 1</a>
<ul>
<li><a href="javascript:void();">Pestaña 1.1/a></a></li>
<li><a href="javascript:void();">Pestaña 1.2</a></li>
<li><a href="javascript:void();">Pestaña 1.3</a></li>
<li><a href="javascript:void();">Pestaña 1.4</a></li>
</ul>
</li>
<li><a href="javascript:void();">Pestaña 2</a>
<ul>
<li><a href="javascript:void();">Pestaña 2.1</a></li>
<li><a href="javascript:void();">Pestaña 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void();">Pestaña 3</a>
<ul>
<li><a href="javascript:void();">Pestaña 3.1</a></li>
<li><a href="javascript:void();">Pestaña 3.2</a></li>
<li><a href="javascript:void();">Pestaña 3.3</a></li>
</ul>
</li>
</ul>
muy sencillo, .