css - Z索引- child 不会低于父级

我的Z-index有问题。

我正在构建一个下拉菜单，当您将鼠标悬停在列表项上时，它将显示子下拉菜单。

我希望它从屏幕开始-400px左右然后下降，但是当它向下滑动并向上滑动时，我不希望它位于红色标题上方。

如何获得红色标题下方的子下拉列表，使其仅显示在灰色背景的列表项的正下方？

谢谢

html,
body,
ul {
  padding: 0;
  margin: 0;
}

body {
  background: #f8f8f8;
}

header {
  position: relative;
  z-index: 20;
  background: red;
}

.list-item {
  position: relative;
  padding: 10px 0;
}

.list-item:hover .sub-dropdown {
  /*top: 100%;*/
  /*visibility: visible;
                opacity: 1;*/
}

.sub-dropdown {
  position: absolute;
  top: -10px;
  /*visibility: hidden;
                opacity: 0;*/
  /*transition: 0.25s;*/
  z-index: -10;
}

<header>
  <ul>
    <li class="list-item">
      <a href="#">Link 1</a>
      <ul class="sub-dropdown">
        <li><a href="">Sub Link 1</a></li>
        <li><a href="">Sub Link 2</a></li>
        <li><a href="">Sub Link 3</a></li>
      </ul>
    </li>
  </ul>
</header>

https://jsfiddle.net/ufgqsw95/1/

最佳答案

您可以使用它，而无需Z-index。

.list-item:hover .sub-dropdown {top: 100%;display:block;}
.sub-dropdown {position: absolute;display:none;}

关于css - Z索引- child 不会低于父级，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44777377/