Dropdown won't stay open AND shows at page load briefly

Design help Animations & Interactions
1

I have watched every available video and read every available thread on how to build a hover-over DROPDOWN in site nav bar. I cannot figure out what I’m doing wrong.

The problems:

  1. When I load the published version of my site, the dropdown menu quickly flashes on the screen before being (properly) hidden

  2. When hovering over the [Dropdown trigger] element, the dropdown displays properly. But the dropdown disappears when you go to click something in it. I have watched the existing videos and read the threads on how to solve this problem – and they don’t help.

What am I missing??!!

Here is my public share link: https://preview.webflow.com/preview/natashas-business-starter-0ff97b?utm_medium=preview_link&utm_source=designer&utm_content=natashas-business-starter-0ff97b&preview=3f622073595221b03d3c8355b81a729d&mode=preview

Here is the published version of the site: https://natashas-business-starter-0ff97b.webflow.io/

2

Good news – I self-solved this.

In the video tutorial on dropdown interactions – they only briefly talk about hover trigger for navigation dropdowns, and they leave out a critical piece of information that is buried in the text version of the instructions that accompany that same video.

The text instructions specify that the hover trigger must be on the DROPDOWN WRAPPER, not the TRIGGER div box.

You can see both the video and the written steps here: Custom dropdown menu - Webflow University Documentation

1 Like
3

Glad you were able to get this figured out :+1: