[SOLUCIONADO] Menu desplegable CSS

[ginger27]

Hola a tod@s,

necesito trasformar un menu horizontal sencillo en un menu horizontal desplegable de 3 niveles.
No doy con la solucion, no hay forma de que me monstre los submenus.

Alguien puede echarme una mano?


[URL="http://cositasmolonas.es"]WEB[/URL]

Código HTML:

<!-- Block permanent links module HEADER -->
<section class="header-box blockpermanentlinks-header">
    <ul id="header_links" class="hidden-xs">
        <li><a href="#">INICIO</a></li>
       <li class="dropdown"><a href="#">CATALOGO</a>
       	   <ul class="subMenu1">
            <li class="dropdown"><a tabindex="-1" href="#">BEBÉ NIÑA 0-24 MESES</a>
            	<ul class="subMenu2">
                <li><a href="#">LEOTARDOS Y CALCETINES</a></li>
                <li><a href="#">VESTIDOS</a></li>
                <li><a href="#">CAMISAS, CAMISETAS Y POLOS</a></li>
                <li><a href="#">CHAQUETAS Y JERSEYS</a></li>
                <li><a href="#">CUBREPAÑALES, POLOLOS Y PANTALONES</a></li>
                <li><a href="#">RANITAS Y PELELES</a></li>
                <li><a href="#">CONJUNTOS</a></li>
                </ul>
            </li>
          	<li class="dropdown"><a href="#">BEBÉ NIÑO 0-24 MESES</a></li>
          </ul>
          </li>
        <li><a class="header_links_contact" href="{$link->getPageLink('contact', true)|escape:'html'}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li>
        
        
    </ul>
	<div class="new-menu-bg">
    <div class="mobile-link-top header-button visible-xs">
    	
            <h4 class="icon_wrapp">
                 <span class="title-hed"></span><i class="arrow_header_top_menu arrow_header_top icon-reorder"></i>
            </h4>
            <ul id="mobilelink" class="list_header">
                <li><a href="{$link->getPageLink('index.php')}" class="header_links_home">{l s='home' mod='blockpermanentlinks'}</a></li>
                <li id="header_link_sitemap"><a href="{$link->getPageLink('sitemap')|escape:'html'}" title="{l s='sitemap' mod='blockpermanentlinks'}">{l s='sitemap' mod='blockpermanentlinks'}</a></li>
                <li id="header_link_contact"><a class="header_links_contact" href="{$link->getPageLink('contact', true)|escape:'html'}" title="{l s='contact' mod='blockpermanentlinks'}">{l s='contact' mod='blockpermanentlinks'}</a></li>
            </ul>
        </div>
    </div>
</section>
<!-- /Block permanent links module HEADER --> 

Código:

.blockpermanentlinks-header {
  position: absolute;
  left: 0px;
  top: 187px;
  width: 100%;
  z-index:999;
}
.blockpermanentlinks-header #header_links {
  overflow: hidden;
  border: 1px solid #e7e4de;
  border-bottom: 4px solid #7cd3c0;
  background: #fff;
}

#header_links li {
  float: left;
  padding: 0px 0px 0px 0px;
  margin: 0;
  border-right: 1px solid #dfdfdf;
  position:relative;
}

#header_links li a {
  color: #a9a9a9;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
 /* display: block;  */
  padding: 19px 50px 19px 50px;
}

#header_links li a:hover, body#index a.header_links_home, #sitemap a.header_links_sitemap, #contact a.header_links_contact, #cms a.header_links_delivery, #stores a.header_links_store {
  color: #7cd3c0;
}

/****DESPLEGABLE****/
#header_links li {
    display: block;
    width:150px;
    height: 1.5em;
    padding-top: 5px;
    margin-right: 2px;
    position:relative;
    background-color: yellow;
    float: left;
    text-align: center;
    line-height: 1em;
}

.dropdown a { text-decoration: none; color: black; }

.subMenu1 { top: 0.5em; position: relative; margin-left:-40px; }
.subMenu1, .subMenu1 a { color: white; }
.subMenu2, .subMenu3 { position: absolute; top: 0; left: 12em; margin-left: 2px; }


#header_links .subMenu1 li {
    width:240px;
    border-top: 2px solid white;
}
#header_links .subMenu2 li {
    border-top: 0;
    border-bottom: 2px solid white;
	width:240px;
}
#header_links .subMenu3 li { background-color: orange; width:240px; }

li>ul { display: none; }
li:hover>ul{
    display: block;
}
/**** END DESPLEGABLE******/

[pzin]

Estás ocultando el contenido de la lista con overflow: hidden.

[ginger27]

muchisimas gracias.....te quiero

[ginger27]

Buenos días,

vuelvo a abrir el tema....

Ahora resulta que el menu lateral CATEGORIAS, no se queda desplegado. Algo tiene que haber en el codigo del menu horizontal que molesta en el otro.

Ayudaaaa pleaseeeee

[URL="www.cositasmolonas.es"]EJEMPLO[/URL]

Gracias

[VityOsma]

Añade:
li>ul:hover{display:block}
Para que al tener en ratón encima del menú desplegado se mantenga visible, porque si no al quitar el ratón de encima de el li que muestra esta lista, se ocultará. Eso parece así a simple vista.