Dropdown menu using html and css hides behind the h1?

Question

This is the first time i am building a drop down menu for the navigation.
The functionality of the dropdown menu works fine.
But my dropdown appears behind the h1(it's a hero section)

• I tried using z-index with greater value on many places but none
  worked.
• I tried using z-index with lesser value on the h1 and greater value on the drop-down none worked

i read many related post in the same forum and tried the suggested solution but none worked for me.

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

Can anyone help me figure out how to make drop-down-menu to appear infront of the h1?

Answer 1

It's because you forgot to set the dropdown backgroundcolor:

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

By making this adjustment it should work as expected.