Crear menu desplegable

¿Por qué correr detrás de las secuencias de comandos, como jQuery, mientras que usted puede utilizar simplemente CSS y HTML para crear un menú desplegable para su blog o web. Ahora necesita aprender cómo crear un menú desplegable en la navegación

¿Cómo crear un menú desplegable?

Un menú desplegable adicional, es cuando se tiene demasiado contenido en su blog o web o te gusta mantener las cosas bien organizadas. Para agregar un menú desplegable para blogs de Blogger haga lo siguiente:

Un clic en Diseño

Un clic en "Añadir un gadget"

Seleccione el widget HTML/Javascript, abralo


Ingrese las siguientes lineas de código en su interior


<style>

#adbnavbar {

background: #060505;

width: 960px;

color: #FFF;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:35px;

}

#adbnav {

margin: 0;

padding: 0;

}

#adbnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#adbnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:1px solid #333;

border-right:1px solid #333;

height:35px;

}

#adbnav li a, #adbnav li a:link, #adbnav li a:visited {

color: #FFF;

display: block;

font:normal 12px Helvetica, sans-serif; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

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

background: #BF0100;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#adbnav li {

float: left;

padding: 0;

}

#adbnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#adbnav li ul a {

width: 140px;

}

#adbnav li ul ul {

margin: -25px 0 0 161px;

}

#adbnav li:hover ul ul, #adbnav li:hover ul ul ul, #adbnav li.sfhover ul ul, #adbnav li.sfhover ul ul ul {

left: -999em;

}

/*--www.ayudadeblogger.com

www.abogadosasociados.com www.volantedeportivo.com Drop Down Menu ----*/

#adbnav li:hover ul, #adbnav li li:hover ul, #adbnav li li li:hover ul, #adbnav li.sfhover ul, #adbnav li li.sfhover ul, #adbnav li li li.sfhover ul {

left: auto;

}

#adbnav li:hover, #adbnav li.sfhover {

position: static;

}

#adbnav li li a, #adbnav li li a:link, #adbnav li li a:visited {

background: #BF0100;

width: 120px;

color: #FFF;

display: block;

font:normal 12px Helvetica, sans-serif;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#adbnav li li a:hover, #adbnavli li a:active {

background: #060505;

color: #FFF;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

</style>

<div id='adbnavbar'>

<ul id='adbnav'>

<li>

<a href='/'>Inicio</a>

</li>

<li>

<a href='#'>Temas</a>

</li>

<li>

<a href='#'>Contactos</a>

</li>

<li>

<a href='#'>Noticias</a>

<ul>

<li><a href='#'>Nombre 1</a></li>

<li><a href='#'>Nombre 2</a></li>

<li><a href='#'>Nombre 3</a></li>

</ul>

</li>

</ul>

</div>


Reemplace # con las URLs de sus entradas y el texto en negrita Nombre 1 con el nombre de las páginas pertinentes.

Para añadir otra pestaña simplemente pega este código antes del cierre </ul>

<li> <a href='#'>Nombre 4</a> </li>

Listo ahora ya tienes este menú horizontal con submenús en tu blog de Blogger


Si deseas puedes realizar algunos cambios:

Para cambiar el color de fondo del menú principal, cambia #060505

Para cambiar el fondo de una ficha con el ratón estacionario, cambia #BF0100

Para cambiar el color de fondo del menú desplegable, cambia #BF0100

Para cambiar el color de fondo del menú desplegable al pasar el ratón estacionario, cambia #060505


Un clic en "Guardar" eso es todo!