Problema con los sub menu de las plantillas blogger

Hace un tiempo publique un menú en la siguiente entrada Simple menú horizontal desplegable para blog y un bloggero me dijo que los sub menú quedan escondidos detrás del contenido. Como todo novato me puse a leer y descubrí cual es el problema. Resulta que las plantillas del diseñador de plantillas de blogger traen estilos pre definidos que encierran las personalizaciones que agregamos como el caso del menú que publique. Para solucionar esto vamos a eliminar esos estilos y dar rienda suelta a nuestra creatividad reprimida por esas plantillas. Como siempre recordaremos que no somos expertos y haremos una copia de seguridad de nuestra plantilla por si la embarramos. Luego de esto procederemos a eliminar estos malditos estilos pre diseñados que nos arruinan la vida. Para ello vamos al Escritorio Blogger > Plantilla > Editar HTML y con CTRL + F buscamos lo siguiente:

class='tabs'

Busca y borra todas las que tengas en tu plantilla. Luego eliminaremos el CSS correspondiente a esta clase y lo suplantaremos por otro que esta mas abajo. Para ello buscaremos algo como:

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

Esto también lo eliminaremos. PD.: Borren sin miedo, recuerde que esta respaldada la plantilla y si hacemos algo mal estará allí nuestro respaldo. Como dije antes hay que dejar en lugar de lo ultimo que eliminamos lo siguiente:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs .widget ul, .tabs .widget ul {overflow: visible;}

Con esto ya podemos usar esos menú con sub menú que tanto nos gustan. Desde ya muchas gracias y espero les sirva. Saludos. PD.: Este tuto lo vi en un blog en ingles llamado helplogger,blogspot.com.