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

这把小提琴很管用（请参见我们在产品下分发的

）：


但是在我正在构建的网站上下文中的页面上，我运行了JavaScript（包括jQuery）。例如，主页上有一个幻灯片，当我将鼠标悬停在小提琴导航的第三级时，它会在一两秒钟后消失。此外，还有其他一些我无法解释的奇怪行为，比如第三级
li
移动到第二级列表的顶部，等等，在小提琴中不会出现这种情况

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

当我在Firefox中关闭JavaScript时，这种行为似乎消失了

这是什么原因造成的？我如何修复它？我也在
jsfiddle.net
上尝试了不同的JS库和CSS规范化，结果是一样的。我还尝试了Opera，结果也一样，网站的效果更差。Chrome看起来更健壮，更不容易出现错误行为

您可能还注意到，在第三级中，我们分发的第二级
文本为黑色。我也很难让它保持白色。但这不是我的主要问题。我最感兴趣的是JavaScript/CSS交互

编辑注释

我听取了下面的一些建议，并对此进行了更多的测试：

我在小提琴上做了更多的测试：我发现如果你点击“我们分发”，菜单会自动崩溃。这实际上与我在网站上看到的行为相似，只是没有点击就崩溃了。单击菜单并将其折叠后，悬停不会使其恢复正常，我希望它会恢复正常。
两件事：

首先，我认为菜单消失的问题是由于z索引。幻灯片可能具有更高或相同的z索引，导致菜单失去悬停状态。要解决此问题，请执行以下操作：

#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的悬停状态，并基于该状态而不是链接设置链接的颜色

修改：
如果我在这个Fiddle（）中包含jQuery，那么菜单仍然可以像我预期的那样工作。你看到了什么？我也试过了，我看到的和你一样。我看到的是上面描述的。在网站上（不是小提琴），菜单的行为不同，直到我在浏览器中禁用了JS。它真的会在不移动鼠标的情况下消失吗？因为按钮和下拉菜单之间有一点空间，所以它工作得不是很好。我做过多次的测试是在小提琴上仔细地悬停尽可能多的方面，然后在网页上重复这些行为。就网页而言，是的，我只是将鼠标悬停在我想要的地方，然后把手从鼠标上拿开，1-3秒后它就消失了。奇怪的当我禁用JS时，这种行为就会消失。谢谢你的回答！你的推荐已经解决了颜色问题，所以我肯定给你+1。但z指数修正似乎不起作用。我会仔细检查并确保…如果z-index不能修复它，你可能必须给出一个更好的例子或页面链接，如果不真正了解发生了什么，很难说是什么导致了它。我同意。我希望不做那件事就能找到解决办法，但我可能也。。。感谢您的反馈；我很感激。你能像在你的站点上一样在JSFIDLE中设置一个示例滑块吗？第二段代码比需要的要明确得多<代码>#导航顶部li:hover>a
很可能就足够了。