Menú Horizontal Desplegable Personalizado para blogger

En este post les traigo un tutorial donde les voy a enseñar a conseguir un menú desplegable para su blog donde podrán ustedes mismos personalizarlo a su gusto  con unos simples pasos que deberán seguir al pie de la letra, Recuerda siempre que antes de empezar a hacer cambios es recomendable que hagas una copia de seguridad de tu blog.

Hacer un menú desplegable en blogger es muy sencillo, empezamos por dirifirnos a nuestro blog Diseño/Multicolumnas/Javascript y agregan el siguiente codigo:

<div id='NavMenu'>

<div id='NavMenuleft'>

<ul id='nav'>

<li><a href='#'>Menu</a></li>

<li><a href='#'>Menu2</a></li>

<li><a href='#'>Menu2</a></li>

<li>

<a href=’#’>Menu desplegable 1</a>

<ul>

<li><a href=’#‘>submenu 1</a></li>

<li><a href=’#’>submenu 2</a></li>

<li><a href=’#’>submenu 3</a></li>

</ul>

</li>

<li>

<a href=’#’>Menu desplegable 1</a>

<ul>

<li><a href=’#‘>submenu 1</a></li>

<li><a href=’#’>submenu 2</a></li>

<li><a href=’#’>submenu 3</a></li>

</ul>

</li>

</ul></div></div> 

Acá podrán codificarlo, confirme a sus necesidades, <a href=’#‘>: tienes que cambiar el símbolo de la # por la url o dirección web a la que quieres que vaya el enlace (ojo con las comillas no las borres sin querer la url tiene que ir entre las comillas, sólo tienes que sustituir la #, ejemplo: si tengo <a href=’#‘>  colocar su enlace de esta manera <a href=’https://adblogers.blogspot.pe/‘>

Al terminar, se dirigen  Plantilla/Personalizar/Avanzado/Añadir CSS y copiar y pegar el siguiente código:

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

.tabs-inner .section:first-child ul { margin-top: 0px;}

.tabs-inner .widget ul {text-align: center !important;}/*Posición del texto del menu*/

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {

color: #fff; /*Color del texto de las pestañas al pasar el ratón por encima*/

background-color: #356B8E; /*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;

}

#NavMenuleft {

width: 1280px; /*Ancho del menú*/

float: none;

margin: 0 auto;

padding: 0;

}

#nav {margin: 0 auto; padding: 0; background:#25475D;}/*Color del fondo del menu*/

#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 17px Arial; /*Tamaño y tipo de fuente de las pestañas */

color: #fff; /*Color del texto de las pestañas*/

display: block;

margin: 0;

padding: 10px 15px 10px;

}

#nav li a:hover, #nav li a:active {

color: #fff; /*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 17px Arial; /*Tamaño y tipo de fuente de los submenus*/

background: #FC900D; /*Color del fondo de las subpestañas*/

width: 150px; /*Ancho de los submenus*/

color: #fff; /*Color del texto de los submenus*/

float: none;

margin: 0;

padding: 7px 10px;

}

#nav li li a:hover, #nav li li a:active {

background: #FC900D; /*Color del fondo de los submenus al pasar el ratón por encima*/

color: #fff; /*Color del texto de los submenus al pasar el ratón por encima*/

padding: 7px 10px;

}

#nav li {

float: none;

display: inline-block;

list-style: none;

margin: 0;

padding: 0;

}

*{

border-radius:none;

}

#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; }

En este código podrán modificarlo a su gusto, si tienen conocimiento sobre CSS podrán hacer muchas cosas para personalizar su menú de forma mas llamativa.