How to show the dropdown when hovering over the dropdown list

January 14, 2022

I am making a dropdown menu where everthing is working as expected. But when I hover over the dropwdown menu list than it is not showing the dropdown menu, it is dissapering. Here is the code.. Pls help me.. I am stuck with this error since 1 month.

#dropdown {
    position: relative;
    width: 18%;
    left: 5%;
    display: inline-block;
  }
  
  .dropdown-content {
    visibility: hidden;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    z-index: 1;
    height: 90%;
    right: 5%;
    overflow-y: hidden;
    right: 5%;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    width: 850%;
  }
  
  .dropdown-content a:hover {
      background-color: #f1f1f1
    }
  
  .dropbtn:hover + .dropdown-content {
    visibility: visible;
  }

<div class="header">
    <h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn">HOME</h3>
    <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn">ABOUT US</a>
     

    <div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content">
            <a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
            <a href="short straddle sl.html">Short Straddle with Trailing SL</a>
            <a href="straddlesimple.html">09:20 Straddle (Simple)</a>
            <a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
            <a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
            <a href="index combo.html">Index Combo</a>
            <a href="index option buying.html">Index Option Buying</a>
        </div>
        <br><br><br><br><br><br><br><br><br>
        </div>

>Solution :

You need to give the container of your dropdown-content the :hover. Also the default styling of h3 tag gives the element a margin-top and margin-bottom. What you want is padding to make it’s space bigger till you’re able to hover to the dropdown-content itself. See the snippet below to see what I mean.

h3{
  margin: 0;
  padding-block: 1rem;
}

#dropdown {
  position: relative;
  width: 18%;
  left: 5%;
  display: inline-block;
}

.dropdown-content {
  visibility: hidden;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  z-index: 1;
  height: 90%;
  right: 5%;
  overflow-y: hidden;
  right: 5%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 850%;
}

.dropdown-content:hover {
  visibility: visible;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropbtn:hover+.dropdown-content {
  visibility: visible;
}

<div class="header">
  <h3 style="position: absolute; left:28%;" class="animate__animated animate__rollIn">HOME</h3>
  <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" class="animate__animated animate__rollIn">ABOUT US</a>


  <div id="dropdown" class="animate__animated animate__rollIn">
    <h3 class="dropbtn">STRATEGY</h3>
    <div class="dropdown-content">
      <a href="Short Straddle with Divisor Based SL.html">Short Straddle with Divisor Based SL</a>
      <a href="short straddle sl.html">Short Straddle with Trailing SL</a>
      <a href="straddlesimple.html">09:20 Straddle (Simple)</a>
      <a href="straddle shift sl.html">09:20 Straddle (Shift SL to Cost)</a>
      <a href="straddle roll the pending.html">09:20 Straddle (Roll the Pending Leg)</a>
      <a href="index combo.html">Index Combo</a>
      <a href="index option buying.html">Index Option Buying</a>
    </div>
    <br><br><br><br><br><br><br><br><br>
  </div>