纯 CSS3 多级菜单和 Jquery 滑块的问题

Question

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

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

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

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

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

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

我希望看到 JQuery 滑块上方的 CSS3 菜单，但是，我一直无法弄清楚如何解决这个问题。在那之前，我将使用下面的 CSS3 菜单。

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

此致

劳尔·冈萨雷斯

Answer 1

您可以简单地在您的 css 中为菜单分配一个 z-index，这将把它 "above"（即在 z 方向）所有内容否则：

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

编辑：我发誓昨天我使用 Inspector 尝试它时它起作用了！好的，这里有很多重叠的规则......试试这个（在 Firefox 和 Chrome 中对我有用）：

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