Menu Desplegable Blogger.

Ahria

Hola, una vez acudo a vosotros porque quiero implementar una cosa en mi blog y soy incapaz.

Mi blog es este: http://www.elisabethbellardmakeup.com/

Y me gustaria crear un menu desplegable en la cabecera, pero me gustaria que fuera con el diseño que está ahora (es un gadget que hasta donde sé no se puede tocar para crear un menu desplegable).

He estado mirando y probando lo que dice este vídeo

y la verdad que a parte de que el diseño que me queda es horrible, no consigo que me salga más de una subcategoría por cada categoría...

Este es el codigo que he creado (se que hay algunas url incorrectas, pero eso lo arreglaré luego)

<div id='mbwnavbar'>

  <ul id='mbwnav'>

    <li>

      <a href='http://www.elisabethbellardmakeup.com/'>Inicio</a>

    </li>

    <li>

      <a href='#'>Maquillaje</a>
   <ul>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Look'>Looks</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Inspiraci%C3%B3n'>Inspiración</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Halloween%2FCarnaval'>Halloween/Carnaval</a></li>
             
            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Cosplay'>Halloween/Cosplay</a></li>

        </ul>
  

    <li>

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

    <ul>

             <li><a href='http://www.elisabethbellardmakeup.com/search/label/Peinados'>Peinados</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Cuidado%20del%20Cabello'>Cuidados</a></li>

        </ul>

     </li>

<li>

       <a href='#'>Uñas</a>

        <ul>

              <li><a href='http://www.elisabethbellardmakeup.com/p/blog-page_16.html'>Manicuras</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/p/cuidados.html'>Cuidados</a></li>
        </ul>

    </li>
<li>

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

    <ul>
           <li><a href='http://www.elisabethbellardmakeup.com/search/label/Swaches'>Swaches</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/p/esmaltes.html'>Esmaltes</a></li>
 
            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Review'>Productos de cuidado</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Unboxing'>Unboxings</a></li>
        </ul>

     </li>
<li>

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

    <ul>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Sorteo'>Sorteos</a></li>

            <li><a href='http://www.elisabethbellardmakeup.com/search/label/Presentaci%C3%B3n'>Presentaciones</a></li>

        </ul>

     </li>
  </ul>

</div>

Y supongo que lo de conseguir el diseño que tiene actualmente será tocando este código en la plantilla de blogger, pero no se como conseguir el mismo diseño

/**MBW Navgation bar**/

#mbwnavbar {

background: #bdbfbf;

width: 850px;

color: #FFF;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid;

height:35px;

}

#mbwnav {

margin: 0;

padding: 0;

}

#mbwnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbwnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:1px solid #333;

border-right:1px solid #333;

height:35px;

}

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

color: #FFF;

display: block;

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

padding: 9px 12px 10px 12px;

text-decoration: none;

}

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

background: #028490;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbwnav li {

float: left;

padding: 0;

}

#mbwnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbwnav li ul a {

width: 140px;

}

#mbwnav li ul ul {

margin: -25px 0 0 161px;

}

#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav 

li.sfhover ul ul ul { left: -999em;

}

#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav 

li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {

left: auto;

}

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

position: static;

}

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

background: #028490;

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;

}

#mbwnav li li a:hover, #mbwnavli li a:active {

background: #70b6bd;

color: #FFF;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

¿Hay algo que hago mal?

Tunnecino

Y cómo queda? Por que no lo enseñas o lo has quitado del blog :(

1 respuesta
Ramallo

Buenas noches! no se si lo habrás solucionado... pero si sigues necesitando ayuda.. no lo entiendo xD el segundo código que pusiste (css) es el código actual? o es el código que sacaste de algún sitio queriendo crear el menu despegable? y el menu que tienes ahora mismo, es un gadget? un gadget es como una aplicación del blog para crear cosas o como va eso? es que no he usado esas herramientas para crear webs. Aún así estoy seguro de que puedes crear el mismo menu a código y luego hacerlo despegable. Disculpa pero yo no entendí del todo lo que pides! será que como llevo 12 horas de trabajo sin parar.. pues el rendimiento no es el mismo! Un saludo!

1 respuesta
Ahria

#3 #2 al final he hecho otro tipo de menus ^^

1 respuesta
Ramallo

#4 ok! suerte!

Usuarios habituales

  • Ramallo
  • Ahria
  • Tunnecino