将子导航菜单定位在主导航下方

Question

我正在使用 CSS 过渡来制作下拉菜单。动画本身有效，但我对出现在主导航顶部的子导航有疑问。

我尝试在主菜单上添加高 z-index link，但这不起作用：

.navUl li a {
  z-index:9999;
}

子导航代码：

.navUl li ul {
  background-color: green;
  width: 264px;
  position: absolute;
  overflow: hidden;
  top: -200px;
  height: 200px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

那么如何让子导航在主导航下方滑动？

这是link for reference

Answer 1

将 z-index : -1 添加到子导航：

.navUl li ul {
  background-color: green;
  width: 264px;
  position: absolute;
  overflow: hidden;
  top: -200px;
  height: 200px;
  transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  z-index:-1;
}

不需要将 z-index:9999; 添加到 .navUl li a

将子导航菜单定位在主导航下方

Positioning Sub Nav Menu Underneath Main Nav

css

z-index

css-animations