Почему не отображается мое раскрывающееся меню?

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/(ОБНОВЛЕНО)

Итак, его это проверить обновленный скрипку вышекод ниже :)

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

Answer 2

Вы применения правила видимости для самой ссылки, а не в подменю. Измените эту строку:

a#women:hover {visibility:visible;} 

... в этом:

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