jquery - 悬停时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 的间隙。

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

但是，这会使下拉菜单0px远离列表项。所以我建议删除padding-bottomonul#nav并将其添加到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;
}

Answer 2

尝试这个：

CSS

#nav ul {
    margin-top: 0;
}

JS

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

Answer 3

尝试过滤可见和隐藏的ul：

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

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

});