하위 메뉴가 표시되지 않습니다.

Question

내 웹 사이트에 마우스를 가져 가면 메뉴가 나타납니다. 마우스를 가져갈 때까지 확인 메시지가 표시됩니다. 하위 메뉴가 나타나지만 링크를 클릭하기 전에 하위 메뉴가 사라집니다. 여기

는 HTML입니다 -

<div id="top-nav"><div id="nav"> 

<nav> 
<ul id="menu" style="list-style-type: none;"> 

    <li id="sub"><a href="#">Artists</a> 
     <ul> 
      <li><a href="#">Banks</a></li> 
      <li><a href="#">Lil Silva</a></li> 
      <li><a href="#">Frances and the Lights</a></li> 
      <li><a href="#">Jim-E Stack</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Night</a></li> 
    <li><a href="#">Info</a></li> 
</ul> 
</nav> 

</div> 
</div> 

그리고 여기에 CSS입니다 -

#nav { 
text-align:center; 
list-style: none; 

} 
ul#menu { 
background-color: #FFFFFF; 
list-style: none outside none; 
margin: 0 auto; 
padding-bottom: 0px; 
padding-top: 0px; 
text-align: center; 
width: 300px; 

} 
ul#menu:after { 
content: ""; 
background-color: #FFFFFF; 
height: 10px; 
width: 100%; 
display: block; 
position: absolute; 
left: 0; 
margin-top: 20px; 

} 
ul#menu li { 
float: left; 
} 
ul#menu li a { 
color: #666666; 
font-size: 12px; 
margin: 0; 
padding: 0px 35px; 
text-decoration: none; 

} 
ul#menu li a:hover { 
background-color: #ccc; 
} 
a.selected-page, ul#menu a.selected-page:hover { 
background-color: #FFFFFF; 
} 
li#sub ul { 
display: none; 
position: absolute; 
background-color: #FFFFFF; 
z-index: 22222; 
margin-top: 4px; 
overflow: hidden; 
} 
li#sub ul li { 
display: block; 
float: none; 
border-top-style: none; 
border-width: 2px; 
border-color: #FFFFFF; 
text-align: left; 
padding-top: 5px; 
padding-bottom: 5px; 

} 
ul#menu li#sub:hover ul { 
display: block; 
} 
ul#menu li#sub ul li:hover { 
background-color: #FFFFFF; 
} 

내가 잘못하고있는 중이 야 무슨 일이? 어떤 도움이라도 대단히 감사합니다!

li#sub ul { 
    ... 
    margin-top: 4px; 
    ... 
} 

그냥 제대로 작동이 마진 탑 다운 메뉴 당신의 하락을 제거 :

Answer 1

말했다 0에, 당신의 CSS에서 위쪽 여백을 제거 :

또한

li#sub ul { 
    margin-top:0; 
} 

가에서/패딩을 왼쪽 여백을 감소 하위 메뉴 UL 및/또는 LI 자식. 원래 큰 값 (35px)을 사용하면 보이지 않는 많은 공간에서 메뉴를 볼 수 있습니다.

ul#menu li ul li a { 
    padding-left:5px; 
} 

바이올린 : http://jsfiddle.net/LXwTr/

Answer 2

문제는 CSS 코드의 다음 줄입니다.

예를 들어 아래의 "아티스트"- 링크와 드롭 다운 메뉴 사이에 4px 여백 공간이 있습니다. 커서가 링크를 떠나서이 "여백 영역"에 진입하면 브라우저는 링크를 취소하지 않는 것으로 해석하고 드롭 다운을 숨 깁니다.

Answer 3

추가 패딩 : dalucks처럼이

li#sub ul { 
    padding: 0; 
} 

http://jsfiddle.net/tdQmE/