html - 为什么我的下拉菜单没有显示？

Question

我用 HTML 和 CSS 构建了一个下拉菜单。当您将鼠标悬停在“女性” 链接上时，下拉菜单应该会显示，但由于某种原因它没有显示。我找不到问题。

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>

Answer 1

它在这里工作:http://jsfiddle.net/surendraVsingh/BKVfa/4/ (更新)

所以，这里是检查上面更新的 fiddle 和下面的代码:)

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; 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;}​