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******/