MENÚ DESPLEGABLE

¿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>