Menu simple con efecto hover y subm

Tanto los colores de fondo del menú como el color del texto o el borde puede editarse, logrando así que conjunte sin problemas con cualquier plantilla.

Diseño>Edición de HTML>expandimos artilugios

Localiza la etiqueta </head> y añade estas líneas justo antes:

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/>

En el propio código se indican las funciones de cada atributo css.

Recuerda que para modificar el color debe reemplazarse su código (por ejemplo #d2b583) por uno de la tabla de colores.

Para personalizar el estilo de borde, conviene leer esta entrada.

Guarda la plantilla una vez hayas finalizado la edición.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="#">Pestaña 4.1 </a></li>
<li><a href="#">Pestaña 4.2 </a></li>
<li><a href="#">Pestaña 4.3 </a></li>
</ul>
</li>
</ul>
</div>

Sustituye en cada caso Pestaña X por el título de la pestaña que actuará como enlace para desplegar las sub-pestañas (Pestaña 1.1, Pestaña 1.2, etc).

La línea resaltada en color verde pertenece a la primera pestaña del menú, que a excepción de las otras, no despliega sub-pestañas (por tanto contiene un enlace).

La dirección web a la que conducirá cada pestaña debe introducirse en donde aparecen las almohadillas (#).

Para agregar más Pestañas 'generales', que no despliegan contenido, utiliza lo siguiente:

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

Recuerda introducirlo siempre antes del cierre </ul>.

Si deseas aumentar la lista de sub-pestañas, utiliza líneas como esta:

<li><a href="#">Pestaña 2.2 </a></li>

Insértalas en el mismo grupo, antes del cierre </ul>.

Guarda el gadget una vez hayas terminado.