CODEWITHSUNDEEP
htmlcssdrop-down-menucss-positionz-index
mockingbird
mockingbird

Reputation: 63

Dropdown menu using html and css hides behind the h1?

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

Upvotes: 0

Views: 282

Answers (2)

Gicu Aftene
Gicu Aftene

Reputation: 532

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

Upvotes: 1

sm3sher
sm3sher

Reputation: 3350

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.

Upvotes: 2

Related Questions