CODEWITHSUNDEEP
htmlcss
Eklavya Jain
Eklavya Jain

Reputation: 47

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

Upvotes: 0

Views: 42

Answers (3)

TDev
TDev

Reputation: 1

$( ".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>

Upvotes: 0

Simone Rossaini
Simone Rossaini

Reputation: 8162

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>

Upvotes: 1

0stone0
0stone0

Reputation: 43983

Your last CSS selector is missing the + selector:

.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>

Upvotes: 1

Related Questions