Dropdown disappears after moving away from the parent

Pretty simple issue with a simple solution:

remove the z-index: -1; fromt he class .dropdown-content. The negative Z-Index pushes the element below the body (layer-wise), which means it can’t be hovered with the mouse as you will hover the body not the dropdown-box.

body {
  font-family: Calibri;
  margin: 0;
}

.Headers {
  background-color: cadetblue;
  font-family: Georgia;
}

#secondheader {
  margin-top: 0px;
  margin-bottom: 1px;
  padding-bottom: 20px;
  color: white;
}

.Menu {
  background-color: #ddd;
}

.Menu a {
  background-color: #ddd;
  font-size: 20px;
  padding: 4px;
  padding-right: 15px;
  text-decoration: none;
  color: black;
}

.Menu a:visited {
  color: black;
}

.Menu a:hover {
  background-color: gray;
}

.Menu ul {
  margin-top: 0px;
  padding-left: 0px;
}

.Menu li {
  display: inline;
  padding: 5px;
}

.dropbtn {
  background-color: #ddd;
  border: none;
  font-size: 20px;
  padding: 5px;
  padding-right: 15px;
  font-family: Calibri;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
}

.dropdown-content a {
  color: black;
  padding: 5px;
  text-decoration: none;
  display: block;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: gray;
}

.pagecontent {
  width: 250px;
}

.pagecontent h1 {
  color: white;
  font-family: Helvetica;
}

.pagecontent ul {
  color: white;
  font-size: 20px;
}

.pagecontent ul li {
  margin: 10px;
}

.pagecontent img {
  margin: 10px;
  margin-left: 30px;
  width: 150px;
  height: 200px;
  border: 1px solid white;
}
<body style="background-image:url(Images/BackgroundImage.jpeg);">
  <div class="Headers">
    <h1 style="margin-bottom:0px; margin-top:0px;">
      Details
    </h1>
    <h2 id="secondheader">
      Some things about me
    </h2>
  </div>
  <div class="Menu">
    <ul>
      <li>
        <a href="Default.aspx">Home</a>
      </li>
      <li>
        <a href="Details.aspx">Details</a>
      </li>
      <li>
        <a href="OnMe.aspx">On Me</a>
      </li>
      <li>
        <a href="Gallery.aspx">Gallery</a>
      </li>
      <li>
        <div class="dropdown">
          <button class="dropbtn">Links</button>
          <div class="dropdown-content">
            <a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
            <a href="https://www.roblox.com/home" target="_blank">Roblox</a>
            <a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
            <a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
          </div>
        </div>
      </li>
      <li>
        <a href="mailto:[email protected]">Contact me</a>
      </li>
    </ul>
  </div>
  <div class="pagecontent">
    <h1>
      Details:
    </h1>
    <ul>
      <li>
        First Name: Asaf
      </li>
      <li>
        Last Name: Pro
      </li>
      <li>
        Class: yod 3
      </li>
      <li>
        Email:[email protected]
      </li>
    </ul>
    <img src="Images/Asaf.jpg" />
  </div>
</body>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top