How to show the dropdown

Question

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

You will not be able to select anything from the drop down without a focus/click event — mplungjan, Jan 12 '22 at 14:33

score 1 · Answer 1 · answered Jan 12 '22 at 14:26

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>

Its working but there is a prob. that when I hover over the strategy its showing me the dropdown but when I am going down to open any list then it is hiding, thus I am not able to open any link in the drop down! — Eklavya Jain, Jan 12 '22 at 14:37

score 1 · Answer 2 · answered Jan 12 '22 at 14:26

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>

Its working but there is a prob. that when I hover over the strategy its showing me the dropdown but when I am going down to open any list then it is hiding, thus I am not able to open any link in the drop down! — Eklavya Jain, Jan 12 '22 at 14:37
Your question was: _show the drop down when the class (dropbtn) is hovered_ :) — Simone Rossaini, Jan 12 '22 at 14:41
Yeah it is working as I expected, but still there is a prob. which I am asking help for! — Eklavya Jain, Jan 12 '22 at 14:44

score 0 · Answer 3 · answered Jan 12 '22 at 14:29

$( ".dropbtn" ).click(function() {
  $(".dropdown-content-strategy").toggleClass("d-none");
  console.log('Click!');
});

#dropdown {
  position: relative;
}

.dropbtn {
  position: relative;
}

.dropdown-content-strategy {
  overflow-y: hidden;
  position: relative;
  background-color: #e2f1d9;
}

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

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

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

.d-none {
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdown" class="animate__animated animate__rollIn">
  <h3 class="dropbtn">STRATEGY</h3>
  <div class="dropdown-content-strategy d-none">
    <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>

Doesn't Work! Pls check it again – Eklavya Jain Jan 12 '22 at 14:31 — Eklavya Jain, Jan 12 '22 at 14:31
But I dont wank click I want when I hover over the element – Eklavya Jain Jan 12 '22 at 14:38 — Eklavya Jain, Jan 12 '22 at 14:38

How to show the dropdown

3 Answers3