How do I get this dropdown menu to stay open?

Do I have to use javascript? What is the fix for this? Thank you for your time! I wanted it to say below the line.
Link below:
https://codepen.io/niadani/pen/QWOZEPX

So here’s your problem.
image

Note the white space between your .dropdown element and the content. When the mouse moves from .dropdown towards the content, it leaves .dropdown, meaning that the content disappears because it’s no longer hovering over that element.

The problem further is that your dropdown content and your list item arent even joined together, so having a transitional hover is difficult. You would need to move the dropdown menu up 5 pixels so that they meet, and then apply the hover effect to the list-item rather than the dropdown itself.

.list-item:hover .dropdown .dropdown-content { /* Was .dropdown:hover .dropdown-content */
  display: block;
}

.dropdown-content {
  z-index: 1;
  display: none;
  position: absolute;
  min-width: 230%;
  background-color: var(--mainwhite);
  box-shadow: 0 20px 20px;
  transition: 0.3s color;
  border-radius: 4px;
  left: -66%;
  top: 40px; /* Was 45px. */
}
2 Likes

In addition to what @m_hutley has suggested please note that your html is invalid and you can’t nest two uls as direct children. You don’t need to do that anyway as you use the parent list to nest the dropdown ul.

This is the html that you should have for that list item.

 <ul class="nav-list">
    <li class="list-item dropdown">
      <!--  <ul class="dropdown"> -->
      <a href="generalresourcespage.html">resources</a>
     
      <ul class="dropdown-content">
        <li><a href="#" class="purplehover">Worksheets</a></li>
        <li><a href="catguide.html" class="purplehover">Cat Guides</a></li>
        <li><a href="#" class="purplehover">Sanctuary</a></li>
        <li><a href="#" class="">About Us</a></li>
        <!--</ul> -->
      </ul>
    </li>
    <li class="list-item">
      <a href="shop.html">shop</a>
    </li>
    <li class="list-item">
      <a href="blog.html">blog</a>
    </li>
  </ul>

I moved the dropdown class to the list element.

Also note that rather than using top:45px you should use top:100% and then the menu will always match the height of the parent and always hover as required.


.dropdown-content {
  z-index: 1;
  display: none;
  position: absolute;
  min-width: 230%;
  background-color: var(--mainwhite);
  box-shadow: 0 20px 20px;
  transition: 0.3s color;
  border-radius: 4px;
  left: -66%;
  top: 100%;/* use this */
}

With those changes in place the hovered menu will automatically go below the parents padding and the drop down will go below the light blue line which is what I assume you wanted.

Screen Shot 2022-02-28 at 13.56.50

Bear in mind this won’t work on touch devices (or may only partially work). Drop down hover menus are one of the hardest elements to code for accessibility and touch and even experienced developers have trouble coding them.

1 Like

ily.

ah wow. maybe i followed the wrong tutorial. thank you paul. always wow me. you are the best!!

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.