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 >
  <a href="#" >What We Do</a>
  <ul >
    <li >
      <a  href="#">Social Media Marketing</a>
    </li>
    <li >
      <a  href="#">Search Engine Optimization</a>
    </li>
    <li >
      <a  href="#">Web Development</a>
    </li>
    <li >
      <a  href="#">App Development & Promotion</a>
    </li>
    <li >
      <a  href="#">Strategy Marketing</a>
    </li>
    <li >
      <a  href="#">Lead Generation</a>
    </li>
  </ul>
</div>

<h1 >
  Start growing your business with
  <span >digital marketing.</span>
</h1>

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

CodePudding user response：

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.

CodePudding user response：

The drop down menu is not under the h1: it's an optical illusion...

add background-color: white; to .drop-down__list to see the effective z-placing