¿Por qué no aparece mi menú desplegable?

He creado un menú desplegable con HTML y CSS. Se supone que el menú desplegable se muestra cuando pasas el cursor sobre el "Mujer" enlace, pero por alguna razón no se muestra. No puedo encontrar el problema.

CSS:

li.menu_item {display:inline; list-style-type: none; padding-right: 20px; position:relative; }
#menu li a {text-decoration:none; color:black;}
#menu_main{border-color:#E2E2E2;border-style:solid; border-width:1px 0 1px 0;}

#submenu{  margin:0; padding:0; position:absolute; width:550px; border:1px solid black; left:5px; top:34px; background:#F6F6F6; visibility:hidden;}
a#women:hover {visibility:visible;}
.submenu{ margin:0; padding:0; }
.submenu li{ margin:0; padding:0; list-style:none; }
.submenu_vak{float:left; width:150px; margin: 5px; padding: 5px;}
.submenu_titel{font-weight:bold;}

HTML:

    <ul id="menu">
        <li class="menu_item"><a href="merken2.php">Home</a></li>
        <li class="menu_item"><a href="steden.php">City</a></li>
        <li class="menu_item"><a id="women" href="#">Women</a>
           <div id="submenu">
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Kleding</a></li>
                <li><a href="#">Broeken & Jeans</a></li>
                <li><a href="#">Jassen</a></li>
                <li><a href="#">Truien & Vesten</a></li>
                <li><a href="#">Colberts & Pakken</a></li>
                <li><a href="#">Lingerie</a></li>
             </ul>
              </div>
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Schoenen</a></li>
                <li><a href="#">Sneakers</a></li>
                <li><a href="#">Slippers & Sandalen</a></li>
                <li><a href="#">Instappers</a></li>
                <li><a href="#">Nette schoenen</a></li>
             </ul>
              </div>
              <div class="submenu_vak">
             <ul class="submenu">
                <li class="submenu_titel"><a href="#">Accessoires</a></li>
                <li><a href="#">Horloges</a></li>
                <li><a href="#">Brillen & Zonnebrillen</a></li>
                <li><a href="#">Riemen</a></li>
                <li><a href="#">Tassen</a></li>
             </ul>
              </div>                  
           </div>
        </li>
        <li class="menu_item"><a href="#">Men</a></li>
    </ul>   
</div>

preguntado el 29 de junio de 12 a las 20:06

verifique la respuesta actualizada y el enlace jsfiddle en esa respuesta. -

2 Respuestas

Aquí está funcionando: http://jsfiddle.net/surendraVsingh/BKVfa/4/ (ACTUALIZADO)

Entonces, aquí está el violín actualizado arriba y el código a continuación :)

CO

li.menu_item {display:inline; list-style-type: none; padding-right: 20px; position:relative; }
#menu li a {text-decoration:none; color:black;}
#menu_main{border-color:#E2E2E2;border-style:solid; border-width:1px 0 1px 0;}

#submenu{  margin:0; padding:0; position:absolute; width:550px; border:1px solid black; left:5px; top:34px; background:#F6F6F6; display:none;}
.menu_item:hover #submenu {display:block;}
.submenu{ margin:0; padding:0; }
.submenu li{ margin:0; padding:0; list-style:none; }
.submenu_vak{float:left; width:150px; margin: 5px; padding: 5px;}
.submenu_titel{font-weight:bold;}​

Respondido el 29 de junio de 12 a las 20:06

Esto es imposible de usar en Opera 12, posible en otros lugares. Tan pronto como mueves el ratón del texto 'mujeres', se cierra inmediatamente. - rana de metal

verifique el violín actualizado en respuesta, solo se trata de la posición superior de #submenu. - SVS

@SVS ¡Buen trabajo! Así que supongo que usar la propiedad de visibilidad fue incorrecto. ¿Podría explicar cómo o por qué funciona display:block para mostrar un elemento oculto? - el_niño_za

El uso de la visibilidad no está mal, solo hace que ese bloque sea invisible pero aún ocupa el espacio en la pantalla de otro lado: ninguno hace que el elemento sea invisible y se muestra como si no estuviera allí (no hay espacio ocupado). stackoverflow.com/questions/3475119/… - SVS

Está aplicando la regla de visibilidad al enlace en sí, no al submenú. Cambia esta línea:

a#women:hover {visibility:visible;}

...dentro de esto:

.menu_item:hover #submenu {visibility:visible;}

Respondido el 29 de junio de 12 a las 20:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.