纯 CSS3 多级菜单和 Jquery Slider 的问题

Question

我是这个网站的新手，希望有人可以帮助我解决我遇到的烦人问题。

相关主页位于 www.raulgonzalez.com/menu.php。

这是一个HTML5和CSS3页面，也使用简单的JQuery图像滑块。

如您所见，CSS3 菜单出现在两个地方以说明问题。1） 在 JQuery 滑块上方2） 在 JQuery 滑块下方

如果单击JQuery滑块下方的"关于"菜单，菜单将毫无问题地展开并覆盖页面的底部。

现在，如果您单击JQuery滑块上方的"关于"菜单，则菜单不会完全展开。

我希望在JQuery滑块上方看到CSS3菜单，但是，我无法弄清楚如何解决此问题。 在那之前，我将在下面的CSS3菜单中生活。

非常感谢其他人可以提供的任何想法、建议或解决方案。

真诚地

劳尔·冈萨雷斯

Answer 1

您可以简单地在 css 中为菜单分配一个 z 索引，这会将其放在"上方"（即在 z 方向上）其他所有内容：

ul.main-navigation {
  z-index: 100;
}

编辑：我发誓昨天当我使用检查器尝试它时，它有效！ 好的，这里有很多重叠的规则...试试这个（在火狐和Chrome中对我有用）：

ul li {
    display: block;
    position: relative;
    float: left;
    background: #000099;
  z-index:100;
  }