在主导航下方定位子导航菜单答案

【问题标题】：Positioning Sub Nav Menu Underneath Main Nav在主导航下方定位子导航菜单
【发布时间】：2020-04-22 21:35:38
【问题描述】：

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

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

.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

【问题讨论】：

标签： css css-animations z-index

【解决方案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

【讨论】：