jquery - 下拉框不断闪烁 - JQuery 和 CSS

Question

我在处理一些非常基本的事情时遇到了困难。我正在尝试使用 JQuery 和 CSS 实现下拉框。我不明白为什么当我将鼠标悬停在“产品”链接上时，我的下拉框一直在闪烁。

这是我正在处理的演示。 http://174.132.101.73/~ree/header/

我将不胜感激。

编辑

那么代码可以通过查看我提供的链接的源代码找到。您可能需要显示/隐藏下拉框的主要部分是这个，以及 CSS:

 $(document).ready(function(){
  $('li.headlink').hover(
   function() { $('ul', this).css('display', 'block'); },
   function() { $('ul', this).css('display', 'none'); });
 });

Answer 1

#header_wrapper 的宽度固定为 950px，#logo 和 #nav 在其中 float 。由于 #logo 是 250px，因此 #nav 中的内容还剩下 700px(其元素也是 float 的)。

在“产品”子菜单可见之前，一切都很好。然后它的 .headlink 变得更宽，由于额外的内容，这将 #nav 的整体大小推到它被迫向下到下一个“行”的地方，下面#标志。这就是 float 元素的工作方式；它们水平地填充空间，直到某个 block 太大并被推到第一个 block 下方。

闪烁是因为 :hover 不再处于事件状态并且子菜单被隐藏。然后一切又回到原来的样子。除了鼠标指针还在那里，所以现在 :hover 再次激活。重复。

我不确定如何修复它，但在我看来这就是问题所在。也许您可以改变元素的嵌套方式，或者不要 float 导航部分。为了快速修复，您可以将 #header_wrapper 宽度更改为更大的宽度，例如 1450 像素，只是为了查看“产品”子菜单的行为方式，并解决它的问题。