Drop-down delay causes menu to overlap

When I use close delay 300ms, I get into a situation both menus are overlapping when hovering over the menus. If I don’t use close delay, it’s hard to catch the menu, especially if I’d like to have the drop-down menu a few pixels apart from the menu. Any ideas, @garymichael1313 ?

Thank you, Asaf


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @LupoAsaf,

  1. Yes sir! Don’t use two different dropdowns. Build one and make sure the trigger is the parent and all other elements in the interaction are “children or siblings”. To do this, the Div structure must be ONLY one level from the parent Div it’s in. When your layers go beyond 2 deep it won’t work because it’s beyond a sibling.

  2. At the bottom of the interaction panel, on the main screen at the very bottom, be sure to select “Class” for the interaction name in the list.

  3. Finish the entire interaction, close it, then go into the Navigator and simply copy that entire parent block.

  4. You’ll have two of the same, but they will open independently when you hover out. Now all you have to do is change the text content only. You won’t need to deal with class names, they all can have the same class. Example: Dropdown Link, Nav Link, etc.

That’ll work for ya :slight_smile:

1 Like

Hey, I am using the inbuilt dropdown element from webflow… But the issue I am facing is that the dropdown element is overlapping the other content on the page. I have tried using z-index, positioning but still, I am facing the issue…