Menú Desplegable

En esta entrada, y de la forma más fácil posible, intentaré explicar como instalar un menú desplegable con subpestañas en tu blog. Es un ejercicio muy sencillo, aunque puede llevarte a la desesperación si no sigues todos los pasos aquí indicados. Comenzamos…

Lo primero: si la plantilla que tienes seleccionada para tu blog no es una de las simples, si tienes seleccionada una de las del diseñador de plantillas, realiza  estos  pasos.

Si tu plantilla es simple pasa al siguiente paso. 

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos: Ya sabes CTRL+F para que os aparezca el buscador. 

 /* Menu horizontal con buscador
 ----------------------------------------------- */
 #menuWrapper {
 width:100%; /* Ancho del menú */
 height:35px;
 padding-left:14px;
 background:#333; /* Color de fondo */
 border-radius:20px; /* Bordes redondeados de la barra principal */
 }
 .menu {
 padding:0;
 margin:0;
 list-style:none;
 height:35px;
 position:relative;
 z-index:5;
 font-family:arial, verdana, sans-serif;
 }
 .menu li:hover li a {
 background:none;
 }
 .menu li.top {display:block; float:left;}
 .menu li a.top_link {
 display:block;
 float:left;
 height:35px;
 line-height:34px;
 color:#ccc;
 text-decoration:none;
 font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
 font-size:13px; /* Tamaño de la fuente */
 font-weight:bold;
 padding:0 0 0 12px;
 cursor:pointer;
 }
 .menu li a.top_link span {
 float:left;
 display:block;
 padding:0 24px 0 12px;
 height:35px;
 }
 .menu li a.top_link span.down {
 float:left;
 display:block;
 padding:0 24px 0 12px;
 height:35px;
 }
 .menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
 .menu li:hover {position:relative; z-index:2;}
 .menu ul,
 .menu li:hover ul ul,
 .menu li:hover ul li:hover ul ul,
 .menu li:hover ul li:hover ul li:hover ul ul,
 .menu li:hover ul li:hover ul li:hover ul li:hover ul ul
 {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

 .menu li:hover ul.sub {
 left:0;
 top:35px;
 background:#333; /* Color de fondo del submenú */
 padding:3px;
 white-space:nowrap;
 width:200px;
 height:auto;
 z-index:3;
 }
 .menu li:hover ul.sub li {
 display:block;
 height:30px;
 position:relative;
 float:left;
 width:200px;
 font-weight:normal;
 }
 .menu li:hover ul.sub li a{
 display:block;
 height:30px;
 width:200px;
 line-height:30px;
 text-indent:5px;
 color:#ccc;
 text-decoration:none;
 }
 .menu li ul.sub li a.fly {
/* Color de fondo del submenú */
 background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBYcxDbQaqHgVofWmgmF0ndvOV9uJt5y9H2fkkgtd3hGOWBnGnqrktiV-TnFCLBEeVgp85lCnAhkxn-o6QSkrNLxDiGV42v_-ouTwhbtd3awnU96JUIRMWHRkIcqhM4mwgYIkILcfVHIR/) 185px 10px no-repeat;}
 .menu li:hover ul.sub li a:hover {
 background:#2580a2; /* Color de fondo al pasar el cursor */
 color:#fff;
 }
 .menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
 background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaBYcxDbQaqHgVofWmgmF0ndvOV9uJt5y9H2fkkgtd3hGOWBnGnqrktiV-TnFCLBEeVgp85lCnAhkxn-o6QSkrNLxDiGV42v_-ouTwhbtd3awnU96JUIRMWHRkIcqhM4mwgYIkILcfVHIR/) 185px 10px no-repeat; color:#fff;}

 .menu li:hover ul li:hover ul,
 .menu li:hover ul li:hover ul li:hover ul,
 .menu li:hover ul li:hover ul li:hover ul li:hover ul,
 .menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
 left:200px;
 top:-4px;
 background: #333; /* Color de fondo del submenú */
 padding:3px;
 white-space:nowrap;
 width:200px;
 z-index:4;
 height:auto;
 }
 #search {
 width: 228px; /* Ancho del buscador */
 height: 22px;
 float: right;
 text-align: center;
 margin-top: 6px;
 margin-right: 6px;
/* Imagen de fondo del buscador */
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQg5MMC5DFD1QzIB5CRWXPrUNeI_dXNzzN9TiB3vc5q1dowrtUMNXYY8wyWkGvzkyxWkjHqyBqDC_29fBHQ5FcJo_N1XezObCS4ANlZZpFQJgIhLKKMo90iIWAkjGjAmuKS6D4AsmtwY0/s1600/search-bar.png) no-repeat;
 }
 #search-box {
 margin-top: 3px;
 border:0px;
 background: transparent;
 text-align:center;
 }

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

 <div id='menuWrapper'>
< ul class='menu'>
< li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

< li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul>
< li><a href='URL del enlace'>Pestaña 2.1.1</a></li>
< li><a href='URL del enlace'>Pestaña 2.1.2</a></li>
< li><a href='URL del enlace'>Pestaña 2.1.3</a></li>
< /ul>
< /li>
< li class='mid'><a class='fly' href='#'>Pestaña 2.2</a>
< ul>
< li><a href='URL del enlace'>Pestaña 2.2.1</a></li>
< li><a href='URL del enlace'>Pestaña 2.2.2</a></li>
< li><a href='URL del enlace'>Pestaña 2.2.3</a></li>
< li><a class='fly' href='#'>Pestaña 2.2.4</a>
< ul>
< li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li>
< li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li>
< li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li>
< /ul>
< /li>
< li><a href='URL del enlace'>Pestaña 2.2.5</a></li>
< li><a class='fly' href='#'>Pestaña 2.2.6</a>
< ul>
< li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li>
< li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li>
< /ul>
< /li>
< /ul>
< /li>
< li><a href='URL del enlace'>Pestaña 2.3</a></li>
< li><a href='URL del enlace'>Pestaña 2.4</a></li>
< li><a href='URL del enlace'>Pestaña 2.5</a></li>
< /ul>
< /li>

< li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a>
< ul class='sub'>
< 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>
< li><a href='URL del enlace'>Pestaña 3.4</a></li>
< /ul>
< /li>

< li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a>
< ul class='sub'>
< li><a href='URL del enlace'>Pestaña 4.1</a></li>
< li><a class='fly' href='#'>Pestaña 4.2</a>
< ul>
< li><a href='URL del enlace'>Pestaña 4.2.1</a></li>
< li><a href='URL del enlace'>Pestaña 4.2.2</a></li>
< li><a href='URL del enlace'>Pestaña 4.2.3</a></li>
< li><a href='URL del enlace'>Pestaña 4.2.4</a></li>
< li><a href='URL del enlace'>Pestaña 4.2.5</a></li>
< li><a href='URL del enlace'>Pestaña 4.2.6</a></li>
< /ul>
< /li>
< li><a href='URL del enlace'>Pestaña 4.3</a></li>
< li><a href='URL del enlace'>Pestaña 4.4</a></li>
< li><a href='URL del enlace'>Pestaña 4.5</a></li>
< li><a href='URL del enlace'>Pestaña 4.6</a></li>
< /ul>
< /li>

< li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a>
< ul class='sub'>
< 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>


<!-- Buscador -->
< li>
< form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
< input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
< /li>

< /ul>
< /div>

Si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
 <ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
 <li><a href="URL del enlace">Sub pestaña</a></li>
 <li><a href="URL del enlace">Sub pestaña</a></li>
 </ul>
 </li> 
Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:
<li><a href="#" class="fly">Sub pestaña</a>
 <ul>
 <li><a href="URL del enlace">Otra Sub pestaña</a></li>
 <li><a href="URL del enlace">Otra Sub pestaña</a></li>
 <li><a href="URL del enlace">Otra Sub pestaña</a></li>
 </ul>
 </li>

Damos a guardas y listo.
Lo que está en ROJO hay que subtituirlo por la URL del sitio al que queréis que vaya. Si no queréis que vaya a ningún sitio, no pongáis nada.