子菜单不会显示

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

我在做什么错？任何帮助是极大的赞赏！

Answer 1

像dalucks说，从你的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代码以下行：

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

只是删除此边距和你的下拉菜单将正常工作。

在您的示例中，“艺术家”链接和下面的下拉菜单之间有4px的页边空白。如果您的光标离开链接并进入这个“边缘区域”，浏览器将其解释为取消悬停链接 - 并隐藏下拉菜单。

Answer 3

添加填充：0这个

li#sub ul { 
    padding: 0; 
} 

http://jsfiddle.net/tdQmE/