menus desplegables para tu web

En cuanto al diseño de estos menús las posibilidades son enormes, este me gusta por lo sencillo de su aspecto y lo adaptable que es con muchas plantillas aunque con las nuevas plantillas de Blogger no funciona pero bueno, ya hemos visto que casi nada funciona en esas plantillas...

Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:

#menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu li {
float: left;
position: relative;
width: 140px; /* Ancho de las pestañas */
}

#menu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}

#menu li>ul {
top: auto;
left: auto;
}

#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
#menu ul, li { margin: 0 0 0 0; }

#menu ul a
{
display: block;
text-decoration: none;
color: #777; /* Color del texto de las pestañas */
background: #f9f9f9; /* Color de fondo de las pestañas */
padding: 5px;
border: 1px solid #ccc; /* Borde de las pestañas */
text-align: center; /* Alineación del texto */
}

#menu ul a:hover {
color: #E2144A; /* Color del texto al pasar el cursor */
}

#menu li ul a {
text-align: left;
text-decoration: none;
color: #777; /* Color del texto de las subpestañas */
background: #fff; /* Color de fondo de las subpestañas */
border: 1px solid #ccc; /* Borde de las subpestañas */
padding: 5px;
}

#menu li ul a:hover {
color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */
background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */
}






Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:


<div id="menu">
<ul id="menuList">
<li><a class="submenu" href="URL del enlace">Pestaña 1</a></li>
<li><a class="submenu" href="URL del enlace">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
</ul>
</li>
</ul>
</div>





Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.
Si deseas agregar otra pestaña sólo agrega antes del </ul> de color azul otra línea como esta:

<li><a class="submenu" href="URL del enlace">Otra pestaña</a></li>

Si deseas que la pestaña tenga subpestañas entonces agrega este código en lugar del otro:

<li><a class="submenu" href="URL del enlace">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>

Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.