'Hover DropDown Menu Malfunction

I have an issue with creating a hoverable dropdown menu. If I take away the second part of my statement in my hover ( .dropMenu ) the hover function works on the header button, so I know it's not an issue there. I'm extremely stuck, and cannot see any issues. Here is my code:

.dropMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-left: -18px;
  
}

.drop:hover .dropMenu{
  display: flex;
}
<nav id="nav">
  <a href="HTMLRef1.html">Home</a>
  <a href="#" class ="drop">Hover Dropdown</a>
  <a href="#" >Contact</a>
</nav>
<div class="dropMenu">
  <a href= "#">MenuItem1 </a>
  <a href= "#">MenuItem1 </a>
  <a href= "#">MenuItem1 </a>
</div>

The header button that says "DropDown Content" has a class of drop . The actual dropdown menu has a class of dropMenu

htmlcssjavascripthtmljquerybootstrap-4


Solution 1:[1]

See https://stackoverflow.com/a/4502693/12888797

Your current code will only work if your dropdown menu is inside the element with the drop class

Solution 2:[2]

You can make this work by making the div with the "dropMenu" class a sibling of the element with the "drop" class, and adding ~ in the hover part of the css (use that to indicate that it's a sibling of the element you're hovering over that should be affected).

.dropMenu {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-left: -18px;
  
}

.drop:hover ~ .dropMenu{
  display: flex;
}
<nav id="nav">
    <a href="HTMLRef1.html">Home</a>
    <a href="#" class ="drop">Hover Dropdown</a>
    <a href="#" >Contact</a>
    <div class="dropMenu">
        <a href= "#">MenuItem1 </a>
        <a href= "#">MenuItem1 </a>
        <a href= "#">MenuItem1 </a>
    </div>
</nav>

Solution 3:[3]

Check this out. But is only a fast solution

    $(window).resize(function(){
        var screenWidth = window.innerWidth;
        if (screenWidth < 768) {
          $("#collapsable-nav").collapse('hide');
        }
    })

 
    $(".navbar-toggler").click(function(event){
            $("#collapsable-nav").collapse('show');
        });
  
    // a little hack based on ur container.class
    $(".container-fluid").click(function() {
        $("#collapsable-nav").collapse('hide');
    });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Plaisk
Solution 2 hittingonme
Solution 3 Christian König

Related Questions