How to show the dropdown

I am trying to show the drop down when the class (dropbtn) is hovered. But it does'nt seems to work. Or if I add .dropdown:hover .dropdown-content-strategy{..}. Then it is showing the dropdown menu but then if I hover the invisible dropdown menu then also it is showing..

#dropdown {
    overflow-y: hidden;
    position: relative;
    width: 14%;
    height: 51vh;
    z-index: 99999999999999999999999999999999999;
  }

  .dropbtn{
      position: relative;
      left: 21%;
  }

.dropdown-content-strategy{
    overflow-y: hidden;
    display: none;
    position: relative;
    background-color: #e2f1d9;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a:hover{
    background-color: #ddd;

}

.dropbtn:hover .dropdown-content-strategy{
    display: block;
    z-index: 99999999999999999999999999999999999;
}

    <div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content-strategy">
            <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>

Pls help me

Solution 1:

Your last CSS selector is missing the + selector:

What does the "+" (plus sign) CSS selector mean?

.dropbtn:hover + .dropdown-content-strategy{
    display: block;
    z-index: 99999999999999999999999999999999999;
}

#dropdown {
    overflow-y: hidden;
    position: relative;
    width: 14%;
    height: 51vh;
    z-index: 99999999999999999999999999999999999;
  }

  .dropbtn{
      position: relative;
      left: 21%;
  }

.dropdown-content-strategy{
    overflow-y: hidden;
    display: none;
    position: relative;
    background-color: #e2f1d9;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a:hover{
    background-color: #ddd;

}

.dropbtn:hover + .dropdown-content-strategy{
    display: block;
    z-index: 99999999999999999999999999999999999;
}

<div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content-strategy">
            <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 2:

You need to use ~ in selector:

#dropdown {
    overflow-y: hidden;
    position: relative;
    width: 14%;
    height: 51vh;
    z-index: 99999999999999999999999999999999999;
  }

  .dropbtn{
      position: relative;
      left: 21%;
  }

.dropdown-content-strategy{
    overflow-y: hidden;
    display: none;
    position: relative;
    background-color: #e2f1d9;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a{
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 99999999999999999999999999999999999;
}

.dropdown-content-strategy a:hover{
    background-color: #ddd;

}

.dropbtn:hover ~ .dropdown-content-strategy{
    display: block;
    z-index: 99999999999999999999999999999999999;
}

<div id="dropdown" class="animate__animated animate__rollIn" >  
        <h3 class="dropbtn">STRATEGY</h3>
        <div class="dropdown-content-strategy">
            <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>

How to show the dropdown

Solution 1:

Solution 2:

Related

Recent Posts