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

问题是CSS代码的以下行：

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

只需删除此margin-top，您的下拉菜单即可正常运行。

在您的示例中，“Artists”-link和下方的下拉菜单之间有4px的边距空间。如果您的游标离开链接并进入此“边距区域”，浏览器会将其解释为取消悬停链接 - 并隐藏下拉列表。

Answer 2

添加填充：0到此

li#sub ul {
    padding: 0;
}

http://jsfiddle.net/tdQmE/

Answer 3

就像dalucks所说，从你的CSS中移除上边距：

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

此外，减少子菜单UL和/或LI子节点的左边距/填充。使用原始的大值（35px），菜单可以悬停在很多不可见的空间中。

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

小提琴：http://jsfiddle.net/LXwTr/

子菜单将不会显示

3 个答案: