Menú con sub-menus

Podéis verlo funcionando en mi blog de pruebas de menús, bajo el nombre de "MENU DOS (ROBS).

[1] Añadimos el código CSS necesario desde "Edición HTML" en nuestro panel sin expandir la plantilla de artilugios, justo antes de ]]></b:skin>:

/* MENU DOS (Robs)
----------------------------------------------- */

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
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;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}

#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
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: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #999999;
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;
}

Es en este código donde podemos hacer los cambios para escoger otro color diferente para el menú por ejemplo, cambiando los códigos de color en "background".

Lo principal a tener en cuenta es la anchura del menú, que está establecida en 873px en esta parte del código (señalado en negrita):

#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}

Ahí tendréis que cambiar ese valor (873px) por el que mejor se adapte al sitio donde irá colocado. Si vais a ponerlo debajo de la cabecera, lo más adecuado será que tenga el mismo ancho que esta por ejemplo.
También podéis sustituir el valor en pixeles por un porcentaje, así si ponéis "width: 100%" el menú ocupará el ancho total disponible del sitio donde esté colocado.

[2] Colocamos ahora el código necesario para armar nuestro menú en un gadget HTML que arrastraremos luego a donde vayamos a mostrar el menú:

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

<li><a href="URL DEL BLOG" title="Inicio">INICIO</a>
</li>
<li><a href="" title="">PESTAÑA1</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">CONTACTO</a>
</li>
<li><a href="" title="">PESTAÑA2</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA3</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA3</a>
</li>
<li><a href="" title="">SUB-PESTAÑA3</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA4</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA4</a>
</li>
<li><a href="" title="">SUB-PESTAÑA4</a>
</li>
</ul>
</li>
<li><a href="" title="">PESTAÑA5</a>

<ul>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
<li><a href="" title="">SUB-PESTAÑA5</a>
</li>
</ul>

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

Es en este código donde tenemos que colocar los enlaces y el texto que aparecerá en cada pestaña del menú y de los sub-menús.

Donde dice a herf= se coloca cada enlace entre las comillas.
Entre las comillas de title= colocamos el texto explicativo que se verá al pasar el puntero sobre el enlace.
En PESTAÑA1, PESTAÑA2, etc. colocamos el texto que se verá en cada pestaña del menú y en SUB-PESTAÑA1, SUB-PESTAÑA2, etc. el texto que se verá en cada sub-menú.


Para añadir más pestañas y subpestañas al menú, fijaros muy bien en como está construido el código:

El contenido de las pestañas que no van a incluir subpestañas, va incluido entre <li> y </li>

<li><a href="URL DEL BLOG" title="Inicio">INICIO</a></li>

El contenido de la pestaña que incluirá subpestañas irá incluido entre <li> y <ul> a continuación estarán las subpestañas (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> </li>


<li><a href="" title="">PESTAÑA3</a><ul>
<li><a href="" title="">SUB-PESTAÑA3</a></li>
<li><a href="" title="">SUB-PESTAÑA3</a></li>
</ul>
</li>