How to Make Hover on Drop Down Persistant?

Design help Animations & Interactions
1

Hi everyone,

I have been trying to create a menu that opens on hover and stays open as you move cursor into contents of the box. For some reason the box immediately closes once I move mouse out of the “trigger div”. There is no margin on the bottom of the trigger nor the top of the content div as I understand.

Here is a link, would appreciate any help!
https://preview.webflow.com/preview/liquidity-so?utm_medium=preview_link&utm_source=designer&utm_content=liquidity-so&preview=c942fc4709320e83a7eb1e27d3e7e476&pageId=5f6a7de0096063705506da2d&mode=preview

2

BUMPING message in case.

3

If you put an On Hover Out event on the same trigger element, well… you get it, the element you’ve just opened with the hover in event will close.

Remove than hover out event. Instead, define it on another IX, on the menu itself. So you hover in the trigger, the menu opens, you navigate the menu, and as soon as you hover out the menu, it closes. You also have to define a close of the menu if a click happens inside of it.

2 Likes
4

Legend, thank you!!!