Menú desplegable con pestañas de varios niveles para tu blog de blogger

Si quieres un menú para tu blog de blogger que tenga varias pestañas y que cuando pasas el ratón por encima salgan más submenús debemos hacer lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Buscamos el código: ]]></b:skin> (tecleamos Ctrl + F para buscar más rápido)
4) Justo antes de ]]></b:skin> pegamos el siguiente código:

---

/* Menu desplegable
------------------------------------------------------*/

#menubloque {
background:#8c8c8c;
width: 500px;
height: 35px;
font-size: 13px;
color: #ffffff;
border: 1px solid #424242;
padding: 0px auto 0;
font-weight: bold;
margin: 15px auto 0;
font-family:'Trebuchet MS',Arial,Verdana,Sans-Serif;
}
#menudesplegable li {
margin: 0;
list-style: none;
padding: 0;
}
#menudesplegable {
margin: 0;
padding: 0;
}
#menudesplegable ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menudesplegable li a, #menudesplegable li a:link, #menudesplegable li a:visited {
color: #FFFFFF;
display: block;
font-weight: normal;
padding: 9px 15px 8px;
text-transform: lowercase;
margin: 0;
}
#menudesplegable li a:active, #menudesplegable li a:hover {
color: #000000;
background: #cccccc;
text-decoration: none;
margin: 0;
padding: 9px 15px 8px;
}
#menudesplegable li li a:link, #menudesplegable li li a, #menudesplegable li li a:visited {
color: #FFF;
font-weight: normal;
text-transform: lowercase;
background: #bbbbbb;
width: 150px;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#menudesplegable li li a:hover, #menudesplegable li li a:active {
background: #e3e3e3;
color: #000000;
padding: 7px 10px;
}
#menudesplegable li {
float: left;
padding: 0;
}
#menudesplegable li ul a {
width: 140px;
}
#menudesplegable li ul {
position: absolute;
margin: 0;
z-index: 9999;
left: -999em;
height: auto;
width: 170px;
padding: 0;
}
#menudesplegable li:hover, #menudesplegable li.sfhover {
position: static;
}
#menudesplegable li ul ul {
margin: -33px 0px 0px 170px;
}
#menudesplegable li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#menudesplegable li:hover ul, #menudesplegable li li:hover ul, #nav li li.sfhover ul,#menudesplegable li li li:hover ul, #menudesplegable li.sfhover ul, #menudesplegable li li li.sfhover ul {
left: auto;
}
/* Fin menu desplegable ---------------------------*/

---

5) Ahora buscamos <div id='content-wrapper'>
6) Justo antes de <div id='content-wrapper'> pegamos el siguiente código:

---

<div id='menubloque'>
<ul id='menudesplegable'>
<li><a href='URL DE LA PAGINA'>Inicio</a></li>
<li><a href='URL DE LA PAGINA'>Contácto</a></li>
<li><a href='URL DE LA PAGINA'>Sobre mí</a></li>
<li>
<a href=''>Categorías</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li>
<a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>

<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=''>Categorías 2</a>
<ul>
<li>
<a href=''>Categoría 1</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 2</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 3</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 4</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
<li><a href=''>Categoría 5</a>
<ul>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
<li><a href='URL DE LA PAGINA'>TITULO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

---

---

El bloque señalado en verde es el bloque que contiene los enlaces "fijos" es decir, los que no despliegan opciones.

Las palabras marcadas en naranja representan los nombres que despliegan las opciones (o los enlaces).

Sustituye:

TITULO: por el título de la página o el enlace.
URL DE LA PAGINA: por la dirección del blog o la página web.

Posted in: Menus,zona de blogger