How to show the dropdown when hovering over the dropdown list-CodePudding

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 >
    <h3 style="position: absolute; left:28%;" >HOME</h3>
    <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" >ABOUT US</a>
     

    <div id="dropdown"  >  
        <h3 >STRATEGY</h3>
        <div >
            <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>

CodePudding user response：

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: 300px;
  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 >
  <h3 style="position: absolute; left:28%;" >HOME</h3>
  <a href="aboutus.html" style="position: absolute; left: 36%; font-size: 120%;color: white;text-decoration: none; font: bold;" >ABOUT US</a>


  <div id="dropdown" >
    <h3 >STRATEGY</h3>
    <div >
      <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>

CodePudding user response：

you need to hover through id dropdown than it will work

#dropdown:hover .dropdown-content {   visibility: visible;
    display:block;}

#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
    }
  

#dropdown:hover .dropdown-content {   visibility: visible;
    display:block;}

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

    <div id="dropdown"  >  
        <h3 >STRATEGY</h3>
        <div >
            <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>