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

Utilizing JavaScript/jQuery to activate a Bootstrap navbar post-page load

The PHP form in an HTML file fails to function properly if multiple forms are included

The Tab style in Mobile Angular UI does not get applied correctly when nested within an ng-repear

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

Can you explain the meaning and purpose of <meta charset="UTF-8"> tag in

Identifying when a user is idle on the browser

Is there a way for me to retrieve the icons through a content query?

Notification feature experiencing technical difficulties

Script for automated functions

Image of outer space enclosed by a circular boundary

Utilizing Bootstrap's Multi-Grid System

Interactive jQuery Dropdown Menu with Multiple Divs

When the table is clicked, a dynamic accordion table should appear

PHP - fwrite() or fputs() Can Occasionally Mishandle Accented Characters

What is the best way to restrict users from accessing more than 5 Bootstrap Tab-Panes at once?

Maximizing the width of navbar elements with Bootstrap 3

implementing jquery for dynamic pop up placement

Page jumping vertically in Chrome upon reload, with Firefox and Internet Explorer functioning properly

Design your own custom up and down arrow icons or buttons using CSS styling techniques

Exploring various viewport dimensions using Django and Selenium