带有负 Z 索引的下拉菜单隐藏在元素下

Question

我有一个下拉菜单，使用 CSS 过渡动画和 z-index: -1 隐藏在主导航后面。如果导航下面没有任何其他元素，这很好用，但是由于z-index，一旦我放置了一个具有纯色背景的部分，下拉菜单就会在下面。当然，如果我更改为更高的z-index，下拉菜单将位于主导航上方。

除了将下面的元素（在这种情况下为section）更改为position: absolute; z-index: -2之外，我怎样才能达到预期的效果？如果可能的话，我宁愿只改变 nav 类的 css 属性而不是部分。

这是project for reference。

Answer 1

将section位置值更改为relative

section{
  ...
  position:relative;
}

在li:hover 上考虑使用z-index，如下所示。

.navUl li:hover ul {
   z-index: 1;
}