下拉菜单使用html和css隐藏在h1后面?

Question

这是我第一次为导航构建下拉菜单。
功能的下拉菜单工作正常.
但是我的下拉菜单出现在h1后面(这是一个英雄部分)

• 我尝试使用z-index与更大的值在许多地方，但没有
  工作。
• 我尝试在h1上使用较小值的z-index和较大值下拉菜单

我在同一个论坛上阅读了许多相关的帖子，并尝试了建议

链接到Codepen

.drop-down {
position: relative;
}
.drop-down__button:hover+.drop-down__list {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.drop-down__list {
margin-top: 2.4rem;
position: absolute;
top: 1.5rem;
left: -2.7rem;
list-style: none;
border: 2px solid #000;
padding: 2.4rem;
border-radius: 2rem;
min-width: 30rem;
opacity: 0;
pointer-events: none;
transform: translateY(-2rem);
transition: all 0.5s ease-in;
}
.drop-down__list-item:not(:last-child) {
margin-bottom: 2.4rem;
}
.drop-down__link:link,
.drop-down__link:visited {
text-decoration: none;
color: #000;
}

<div class="drop-down">
<a href="#" class="drop-down__button">What We Do</a>
<ul class="drop-down__list">
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">Social Media Marketing</a>
</li>
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">Search Engine Optimization</a>
</li>
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">Web Development</a>
</li>
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">App Development & Promotion</a>
</li>
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">Strategy Marketing</a>
</li>
<li class="drop-down__list-item">
<a class="drop-down__link" href="#">Lead Generation</a>
</li>
</ul>
</div>
<h1 class="heading-primary margin-bottom--s">
Start growing your business with
<span class="">digital marketing.</span>
</h1>

谁能帮我弄清楚如何让下拉菜单出现盈方的h1 ?

Answer 1

这是因为你忘记设置下拉菜单backgroundcolor:

.drop-down__button:hover + .drop-down__list {
opacity: 1;
pointer-events: all;
transform: translateY(0);
background-color: white;
}

通过这个调整，它应该像预期的那样工作。

Answer 2

下拉菜单不在h1下面:这是一种视觉错觉…

将background-color: white;添加到.drop-down__list，观察有效的z-放置