[Tutorial] Menú con subpestañas #1

Hiii! Hoy os enseñare a poner el menú que tenia en mi anterior plantilla~

Por si no os acordáis... El menú estaba justo entre la cabecera y los post, y tenia sub-pestañas!

Este código lo he hecho juntando varios menús distintos y retocándolo yo misma, así que si lo usáis poned créditos si? ^3^

Bueno! No es de los tutoriales más sencillos que he hecho así que cualquier duda me dicen (y si es sobre el html, díganmelo por email Kyaru9@gmail.com que será más sencillo de explicar!)

Una captura del menú de este tuto ^^

Antes de hacer nada, vamos a Plantilla y hacemos una copia de seguiridad de la plantilla! Como tocaremos el HTML, es necesario tener una por si nos equivocamos y queremos recuperarla.

Primero! Vamos a diseño > Gadget de HTML/Javascript > Añadimos este código...

<div id='NavMenu'>
<div id='NavMenuleft'>
<ul id='nav'>
<li><a href='URL'>HOME</a></li>
<li><a href='URL'>PESTAÑA1</a></li>
<li><a href='URL'>PESTAÑA1</a></li>
<li><a href='URL'>PESTAÑA1</a></li>
<li>
<a href='#'>PESTAÑA2</a>
<ul>
<li><a href='URL'>SUB-PESTAÑA1</a></li>
<li><a href='URL'>SUB-PESTAÑA1</a></li>
<li><a href='URL'>SUB-PESTAÑA1</a></li>
</ul>
</li></ul></div></div>

Ese gadget lo arrastraremos justo encima de los post...

Una vez lo tengamos, vamos a Plantilla > Editar HTML > Y buscamos el nombre del gadget que hemos creado anteriormente... Entonces nos saldrá algo como esto:

PRUEBA es el titulo del gadget! Al buscarlo nos saldrá esa linea, debemos copiar la parte que tengo seleccionada en la imagen de arriba (el HTML2 en mi caso).

¡¡Quizás os salga con otro nombre a vosotros, así que copiad la que os salga a vosotros!!

Entonces, vamos a Plantilla > Personalizar > Avanzados > CSS > Añadimos código mientras vemos en la vista previa como va quedando...
Primero ponemos:

#HTML2{
margin-bottom:-35px;
background: #fc6f71;
}

HTML2 > Es la parte que hemos copiado del paso anterior.
background > Fondo del gadget
margin-bottom > Espació inferior entre el gadget y el post.

Justo después, personalizaremos el menú añadiendo a continuación del anterior, este código...

 /* Menu desplegable
----------------------------------------------- */
.tabs-inner .section:first-child ul { margin-top: 0px;}
.tabs-inner .widget ul { background: transparent; text-align: center !important;}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #e6eae6; /*Color del texto de las pestañas al pasar el ratón por encima*/
background-color: #e6eae6; /*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;text-align: center;
padding: 0;
}
#NavMenuleft {
width: 100%; /*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: #fff; /*Color del texto de las pestañas*/
display: block;
margin: 0;
padding: 6px 15px 6px;
background: #fd9a9b;  /*Color fondo de las pestañas*/
border: 2px dotted #ffe8e8; /*Color y forma del borde*/
}
#nav li a:hover, #nav li a:active {
color: #fc6f71;  /*Color titulo al pasar el cursor*/
margin: 0;
background: #c0fbe2;  /*Color fondo al pasar el cursor*/
padding: 5px 15px 5px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font: normal normal 14px Cambria;   /*Fuente de las subpestañas*/
background: #e6eae6;   /*Color fondo de las subpestañas*/
color: #6fac9e;  /*Color de texto de las subpestañas*/
float: none;
margin: 0;
}
#nav li li a:hover, #nav li li a:active {
background: #e6eae6; /*Color del fondo de las subpestañas al pasar el ratón por encima*/
color: #fc6f71; /*Color del texto de las subpestañas al pasar el ratón por encima*/
}
#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; }

Le damos a Aplicar a Plantilla, y tendremos listo este menú!

Cómo os he dicho antes, cualquier duda que tengáis de este tutorial, podéis preguntarme ^^

Hasta pronto!