내 드롭 다운 메뉴가 표시되지 않는 이유는 무엇입니까?

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