Question

这个小提琴起作用（见产品下的We Distribute）：

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

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

当我在Firefox中关闭JavaScript时，行为似乎消退了。

造成这种情况的原因是什么？如何解决？我在jsfiddle.net上尝试了不同的JS库和CSS规范化，结果是一样的。我也用同样的小提琴结果和糟糕的网站结果尝试了Opera。 Chrome似乎更强大，更不容易出现错误行为。

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

编辑注释

我从下面提出了一些建议，并对此进行了更多测试：

我对小提琴进行了更多测试：http://jsfiddle.net/nicorellius/dgUFw/1368/我发现如果点击“我们分发”，菜单就会自动折叠。这实际上与我在网站上看到的行为类似，除了崩溃而不点击。单击菜单后它会折叠，然后悬停不会使它恢复正常，这是我预期的。

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/

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

1 个答案: