0

这个小提琴有效（见We Distribute产品下）：

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

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

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

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

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

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

编辑说明

我从下面接受了一些建议并对此进行了更多测试：

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

4

1 回答 1

2

两件事情：

首先，我认为您的菜单消失问题是由于 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/

于 2012-12-19T21:09:42.043 回答