I’m trying to design a site for my business and I’m having a problem with my dropdown menus. When I move my mouse to select an item in the dropdown and it accidenatlly hovers another navbar element, it closes the dropdown.
I have tried increasing the padding on the dropdown, increasing the close delay, but nothing works. Once I hover off the dropdown in any way, it closes the dropdown menu. I’m sure the fix is simple, but I can’t figure it out. Any help would be greatly appreciated!
If your dropdown menu is closing unexpectedly when hovering, this typically happens when there’s a gap between the dropdown toggle and list that breaks the hover interaction. Here are two solutions:
Remove any margins creating the gap:
Set the top margin of your dropdown list to 0px
Set the bottom margin of your dropdown toggle to 0px
If adjusting margins doesn’t resolve the issue, you can increase the close delay timing in your dropdown settings, though you mentioned you’ve already tried this approach.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
The navbar dropdown seems to be functioning as I would expect it to as a user, that is if I hover over the dropdown menu and hover over anything inside that dropdown, it stays open and in case I hover out or hover over other main navbar links like ‘About’ / ‘Home’, it closes.
In case, you want it to stay open until there is some click on other element, you can change the Mouse Hover interaction that you have setup on the dropdown links to a Click interaction instead. Let me know if you mean something else or if I am looking at a different menu.
Had to fix this on a client nav , the trick was removing the small gap between the toggle and dropdown list. Set both margins to 0 and use padding inside instead. If you want the menu to only close on click, swap the dropdown trigger from hover to click in settings.