JavaScript 可能会干扰 CSS 三级导航系统

Question

这个 fiddle 有效(参见产品下的 We Distribute):

http://jsfiddle.net/dgUFw/1362/

但是在我正在构建的网站上下文中的页面上，我运行了 JavaScript(包括 jQuery)。例如，主页上有一个幻灯片，当我将鼠标悬停在 fiddle 导航的第 3 级时，它会在一两秒后消失。另外，还有其他一些我无法解释的奇怪行为，比如第 3 级 li 移动到第 2 级列表的顶部，等等，这不会发生在 fiddle 中。

我对将 CSS 和 JavaScript 集成在一起还比较陌生，所以我还没有看到这种行为。

当我在 Firefox 中关闭 JavaScript 时，该行为似乎平息了。

是什么原因造成的，我该如何解决？我也在 jsfiddle.net 上尝试了不同的 JS 库和 CSS 规范化，结果是一样的。我还尝试了 Opera，结果相同，但网站结果更差。 Chrome 似乎更健壮，更不容易出现错误行为。

您可能还注意到，在第 3 层中，第 2 层 We Distribute 文本是黑色的。我也很难让它保持白色。但这不是我的主要问题。我最感兴趣的是 JavaScript/CSS 交互。

编辑说明

我从下面采纳了一些建议并对此进行了更多测试:

我对 fiddle 做了更多测试:http://jsfiddle.net/nicorellius/dgUFw/1368/我发现如果单击“We Distribute”，菜单会自行折叠。这实际上与我在网站上看到的行为类似，除了在没有点击的情况下发生崩溃。单击菜单后它会折叠，然后悬停不会使其恢复正常，我希望它会。

Answer 1

两件事:

首先，我认为您的菜单消失问题是由于 z-index。幻灯片可能具有更高或相同的 z-index，导致菜单失去其悬停状态。要解决此问题:

#nav-top li, #nav-top li a {
    z-index: 1000;
}

其次，对于颜色/悬停问题，您需要稍微更改一下 CSS:

#nav-top li a:hover {
    color: #fff;
}

#nav-top li#products-sub:hover > a, #nav-top li#home-sub:hover > a,
#nav-top li#faq-sub:hover > a, #nav-top li#user-sub:hover > a, #nav-top li ul.dist-sub:hover  {
    color: #fff;
}

这将保持 li 的悬停状态，并根据该状态而不是链接设置链接的颜色。

摆弄更改:http://jsfiddle.net/dgUFw/1364/