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＆amp; Chrome最初要测试。

有没有人有任何想法？

由于 Nigel H

Answer 1

闪烁的原因是，主要列表项目与dropdownmenu之间存在5px的差距。

如果您移除了margin-top: 5px;上的#nav ul，那么它应该可以正常运行。

然而，这会从列表项中留下下拉菜单0px appart。因此，我建议删除padding-bottom上的ul#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);
});

});

jQuery在悬停下拉菜单上闪烁

3 个答案: