CÓMO PONER UN MENÚ DESPLEGABLE EN NUESTRO BLOG

AÑADIR EL HTML

Vamos a Diseño y añadimos un gadget HTML/Javascript, dentro pegamos el código que os dejo a continuación y lo ubicamos en la parte superior, debajo de la cabecera (si la tuviéramos ubicada así):

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='URL'>Pestaña1</a></li>
<li>
<a href='#'>Pestaña desplegable 1</a>
<ul>
<li><a href='URL'>Subcategoría 1</a></li>
<li><a href='URL'>Subcategoría 2</a></li>
<li><a href='URL'>Subcategoría 3</a></li>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>
<li>
<a href='#'>Pestaña desplegable 2</a>
<ul>
<li><a href='URL'>Subcategoría 1</a></li>
<li><a href='URL'>Subcategoría 2</a></li>
<li><a href='URL'>Subcategoría 3</a></li>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>
<li><a href='URL'>Pestaña 2</a></li>
</ul>
</div>
</div>

• Donde debemos añadir las URL correspondientes y cambiar el texto que queremos que tengan las pestañas y subpestañas.

• Si os fijáis, en las pestañas que son desplegables, aparece un corchete, este hace que no se redireccione a ningún sitio, pero si queréis que sí lleve a algún sitio de vuestro blog, eliminadlo y poned la URL.

• Cada elemento del menú está entre <li> elemento </li>, para añadir una pestaña normal, sólo debemos añadir este código:

<li><a href='URL'>Pestaña</a></li>

En cambio para una pestaña con subpestañas:

<li>
<a href='#'>Pestaña desplegable</a>
<ul>
<li><a href='URL'>Subcategoría 1</a></li>
<li><a href='URL'>Subcategoría 2</a></li>
<li><a href='URL'>Subcategoría 3</a></li>
<li><a href='URL'>Subcategoría 4</a></li>
</ul>
</li>

Y para añadir subpestañas dentro, añadiremos (siempre dentro de <ul> ... </ul>:

<li><a href='URL'>Subcategoría 1</a></li>

Es importante que siempre respetemos las etiquetas li, cada elemento del menú debe estar entre <li> y </li>

AÑADIR CSS

Ahora vamos a darle estilo a nuestro menú. Para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código, donde modificaremos lo que os he dejado con color:

/* Menu desplegable
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: #ffffff; text-align: center !important;}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #eeeeee; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #ffffff; /*Color del fondo de las pestañas al pasar el ratón por encima*/
text-decoration: none;
}
.tabs .widget li, .tabs .widget li{ display: inline; float: none;}

#NavMenu {
position: relative;
margin: 0 auto;
padding: 0;
border-top: 1px solid #333333; /*Borde superior del menú, si no queremos borramos la línea*/
border-bottom: 1px solid #333333; /*Borde inferior del menú, si no queremos borramos la línea*/
background: #333333; /*Color de fondo del menú, si no queremos borramos la línea*/
}
#NavMenuleft {
width: 800px; /*Ancho del menú*/
float: none;
margin: 0 auto;
padding: 0;
}
#nav {margin: 0 auto; padding: 0; background:transparent;}

#nav ul {
float: none;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
#nav li a, #nav li a:link, #nav li a:visited {
font: normal normal 14px Arial; /*Tamaño y tipografías de las pestañas */
color: #666666; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 10px 15px 10px;
}
#nav li a:hover, #nav li a:active {
color: #cccccc; /*Color del texto de las pestañas al pasar el ratón por encima*/
margin: 0;
padding: 10px 15px 10px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Cambria; /*Tamaño y tipografías de las subpestañas*/
background: #eeeeee; /*Color del fondo de las subpestañas*/
width: 150px; /*Tamaño de éstas*/
color: #333333; /*Color del texto de las subpestañas*/
float: none;
margin: 0;
padding: 7px 10px;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #222222; /*Color del texto de las subpestañas al pasar el ratón por encima*/
padding: 7px 10px;
}
#nav li {
float: none;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
#nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#nav li ul a { width: 140px; }
#nav li ul ul { margin: -32px 0 0 171px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; }
#nav li:hover, #nav li.sfhover {position: static;}
.tabs-outer{overflow: visible;}
.tabs-inner { padding: 0px; } .section { margin: 0px; }