悬停在下拉菜单上的 jQuery 闪烁

Question

我有一个网站正在开发中，当您将鼠标悬停在下拉菜单上时，下拉菜单会闪烁(大部分时间)。

网站在这里:http://www.wya.hardingweb.net

子菜单的 CSS 是这样的:

#nav ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  margin-top: 5px;
  padding: 0;
  list-style: none;
  background-color: rgba(221, 221, 221, 0.7);
  border: 1px solid #cccccc;
}

#nav ul li {
  width: 150px;
  float: left;
  border-top: 1px solid white;
}

#nav ul li.long {
  height: 50px;
}

#nav ul a {
  font-family: helvetica;
  font-size: 15px;
  display: block;
  line-height: 18px;
  padding: 6px 0px;
  color: #252060;
}

#nav ul a:hover {
  text-decoration: underline;
}

这是由以下 jQuery(提取)触发的:

$(document).ready(function() {

//Menu system
$('#nav li').hover(function() {
    //show its submenu
    $('ul', this).slideDown(100);

}, function() {
    //hide its submenu
    $('ul', this).slideUp(100);
});

}); 

我也有一个幻灯片放映，如果我为幻灯片放映禁用 jQuery，那么菜单闪烁问题仍然会重复出现。

我最初使用 Firefox 11 和 Chrome 进行测试。

有没有人有什么想法？

谢谢 奈杰尔·H

Answer 1

闪烁的原因是主列表项与下拉菜单之间有 5px 的间隙。

如果您删除 #nav ul 上的 margin-top: 5px;，那么它应该可以正常工作。

然而，这会使下拉菜单 0px 从列表项中消失。所以我建议删除 ul#nav 上的 padding-bottom 并将其添加到 ul#nav li 中。

在这些更正之后，您应该得到代码:

#nav {
  display: inline;
  float: left;
  margin-right: 10px;
  width: 950px;
  margin: 0;
  margin-top: 50px;
  margin-left: 100px;
  padding: 0;
  list-style: none;
}

#nav li {
  font-size: 28px;
  font-family: code-bold, helvetica, sans-serif;
  letter-spacing: -1px;
  padding-left: 20px;
  padding-right: 20px;
  color: #d1181e;
  float: left;
  display: block;
  position: relative;
  z-index: 500;
  margin: 0 1px;
  padding-bottom: 5px;
}

#nav ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
  background-color: rgba(221, 221, 221, 0.7);
  border: 1px solid #cccccc;
}