【问题标题】：Dropdown menu using html and css hides behind the h1?使用 html 和 css 的下拉菜单隐藏在 h1 后面？
【发布时间】：2022-07-12 22:03:39
【问题描述】：

我为客户做的第一个真实项目

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

我尝试在许多地方使用 z-index，但没有一个价值更高
工作。
我尝试在 h1 上使用较小值和较大值的 z-index 在下拉菜单中没有任何效果

我在同一个论坛中阅读了许多相关帖子并尝试了建议解决方案，但没有一个对我有用。

Link to the codepen

这是我使用的代码

HTML

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

CSS

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

谁能帮我弄清楚如何让下拉菜单出现在 h1 的前面？

【问题讨论】：

标签： html css drop-down-menu css-position z-index

【解决方案1】：

这是因为你忘记设置下拉背景色：

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

通过进行此调整，它应该可以按预期工作。

【讨论】：