Steps for displaying the dropdown menu

Question

Steps for displaying the dropdown menu

I am having trouble with displaying the dropdown menu when hovering over the class (dropbtn). I tried adding .dropdown:hover .dropdown-content-strategy{..} but it's not working as expected. If I do manage to show the dropdown menu, it stays visible even when I hover outside of it.

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

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

Would appreciate any assistance on this matter. Thank you.

html css

Answer 1

Answer №1

Ensure to include the + selector in your last CSS selector:

Understanding the functionality of the plus sign (+) CSS 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>

Answer 2

Ensure to include the + selector in your last CSS selector:

Understanding the functionality of the plus sign (+) CSS 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>

Answer 3

Answer №2

To properly select the elements, you must utilize the ~ symbol in the CSS 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>

Answer 4

To properly select the elements, you must utilize the ~ symbol in the CSS 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>

Answer 5

Answer №3

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

Answer 6

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

Steps for displaying the dropdown menu

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing the HTML5 canvas not to show up on the screen?

Expanding the navigation bar causes it to reach the second row after being translated

What steps can I take to add a horizontal scroll bar and view the entirety of my image?

Issues with Internet Explorer causing headaches with CSS :first-child selector malfunctioning, experiencing strange behavior when utilizing Google Web Fonts

Changing the value of a user object's variable in Django

Is it possible to replace multiple li elements with multiple ul elements within a single ul for better organization?

Refreshing the page in Next.js causes issues with the CSS classNames

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Resizeable drag and drop two-column design

What is the best way to extract a table from a website that has stored the table data separately from the HTML?

disabling responsiveness in Bootstrap 2

Using a Javascript while loop to iterate through an array and display the elements in the .innerHTML property

Steps to turn off fancybox for mobile and show the full image instead

Jekyll is detecting invalid XML entity references

Switching on the click functionality

Is it possible to target elements based on a specific CSS3 property they use?

The Tailwind Typography plugin simply maintains the default font size of heading tags without altering their style

A guide to spinning an image in every direction with CSS

Should the max-height transition be set from 0 to automatically adjust or to none?

"Navigate through the page by scrolling with your mouse all the way to 100