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?
