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

Question

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

有问题的页面位于www.raulgonzalez.com/menu.php。

这是一个HTML5和CSS3页面，它也使用了一个简单的JQuery Image Slider。

正如您所看到的，CSS3菜单出现在两个地方以说明问题。 1）JQuery Slider上方 2）JQuery Slider下面

如果您点击＆＃34;关于＆＃34;菜单在JQuery Slider下面，菜单扩展没有任何问题，并覆盖页面的底部。

现在，如果你点击＆＃34;关于＆＃34;菜单位于JQuery Slider上方，菜单未完全展开。

我更希望看到JQuery Slider上方的CSS3菜单，但是，我还没弄清楚如何解决这个问题。在那之前，我将使用下面的CSS3菜单。

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

此致

Raul Gonzalez

Answer 1

你可以简单地在css中为菜单指定一个 z-index ，这将把它放在＆＃34;以上＆＃34; （即在z方向）其他一切：

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

编辑：我发誓当昨天我使用Inspector尝试时效果很好！好的，这里有很多重叠的规则......试试这个（在Firefox和Chrome中适合我）：

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