Menú horizontal desplegable con CSS

Bueno lo que vamos a ver ahora es un nuevo tipo de menú donde vamos a tener la opción de poder desplegar las pestañas en el caso de que queramos y además les dejo los estilos para que ustedes puedan personalizarlos a su gusto y poder cambiarles algunas cositas para que quede justo para sus blogs. La verdad es muy sencillo, simplemente les voy a dar primero el código HTML que lo pueden poner en una entrada como les voy a mostrar a continuación o bien en un gadget HTML/ Javascript. Entonces el menú se puede por ejemplo de esta manera:




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&gt;</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>

Bueno, como verán fue muy sencillo, cualquier duda o consulta pueden dejar sus comentarios
-
Información tomada de:  http://hogarblogger.blogspot.com.es/2012/09/blog-post_11.html#.UeRENayX-kw