Hover DropDown Menu Malfunction-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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 >
        <a href= "#">MenuItem1 </a>
        <a href= "#">MenuItem1 </a>
        <a href= "#">MenuItem1 </a>
    </div>
</nav>