Hover DropDown Menu Malfunction

Question

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

I have also tried to switch the hover over to the entire navbar to see if it's an issue with the sizing of the dropdown button. Doesn't do anything. — Emily Miller, May 19 '22 at 19:02
I think @plaisk answer is probably right. It might look ugly, but does it suddenly work if you put the "dropMenu" div inside of the "drop" class? — Cameron, May 19 '22 at 19:21

score 2 · Answer 1 · answered May 19 '22 at 19:06

2

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

answered May 19 '22 at 19:06

Plaisk

41
5

1

so I changed my hover command over to: ` #nav .drop:hover ~ #nav #droptest{ background-color: orange; } ` and my index file to : `
Home Hover Dropdown test1 Contact
` And it's still not working. Do you have any idea why? – Emily Miller May 19 '22 at 19:58

score 0 · Answer 2 · edited May 19 '22 at 21:14

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>

Hover DropDown Menu Malfunction

2 Answers2