Question

我的Z-index存在问题。

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

我希望它在-400px左右的屏幕下开始然后下拉，但我不希望它在红色标题上方下降并向下滑动。

如何获得红色标题下方的子下拉菜单，以便它只显示在灰体背景上的列表项目正下方？

由于

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

这是你需要的吗？我删除了z-index。

html,
body,
ul {
  padding: 0;
  margin: 0;
}

body {
  background: #f8f8f8;
}

header {
  background: red;
}

.list-item {
  position: relative;
  padding: 10px 0;
}

.list-item:hover .sub-dropdown {
  animation: showsub 0.5s forwards;
}

.sub-dropdown {
  position: absolute;
  top: -400px;
  z-index: -1;
}

@keyframes showsub {
  0% {
    top: -400px; z-index: -1;
  }
  50% {
    top: 0; z-index: -1;
  }
  100% {
    top: 100%; z-index: 0;
  }

<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>

Answer 2

你可以使用它，不需要Z-index。

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

Answer 3

子下拉列表需要z-index为-1，list-item需要z-index为1。

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

.sub-dropdown {
    position: absolute;
    top: -60px;
    z-index: -1;
}

然后，在：悬停时，您可以给出子下拉列表顶部：100％。

.list-item:hover .sub-dropdown {
    top: 100%;
}

这是期望的结果：https://jsfiddle.net/ufgqsw95/2/？

Z-Index - 孩子不会低于父母

3 个答案: