I don’t see the details of your interaction, but try adding a delay for the overlay.

Thanks so much for the response. Here is the interaction with a delay but it’s still not working. The hover interaction is working without the delay but still isn’t functioning when the interactions are set up together. Any ideas?

The second image shows the fix i’ve added. I created a gradient of the locations instance of the menu bar so that it wouldn’t cover the other nav items but I’m still trying to get to the bottom of why this isn’t working properly.

@annack When I tried it out, it looks like the “on hover” interaction for the Locations button never gets called because “Mouse Enter” gets called first and makes the buttons underneath the overlay inactive.

A workaround I found is adding the “change to” hover during the “Mouse Enter” call on the Locations button.

Then on the overlay, I use a “Mouse Leave” interaction to close it and reset the Locations button to its default state using a variable.

⮑ View Prototype

⮑ View File

Thank you so much for your help. This was very valuable. I got to the point where i could open the menu with the hover state, but when attempting the close interaction, I didn’t have any local variants to choose from. Do you know why this might be? I’m still learning and have perhaps missed a large detail of these design files that I don’t understand yet.

Yes, sadly you can’t reference the “change to” option for the Locations button from the SubMenu since the SubMenu is an overlay and is a separate element from the Locations button.

But you can set a variable on the SubMenu “mouse leave” interaction to toggle the Locations button state.

That’s why in my example, the Locations button has a String variable assigned to it called “location-state”. Then I set that variable to “Default” on mouse leave which will reset the locations button - see example in file.

The fun/overwhelming thing with Figma is you could probably solve these issues in many other ways, but this was a quick fix I found to what you shared.

@annack I found another approach that worked well, without using a variable.

Instead of using “mouse enter” to call the dropdown on your button, you can open the overlay during the “on hover” button interaction. Then you can close the overlay, by adding an interaction to your overlay of “mouse leaves” and “close overlay”.

If you have a wider dropdown, you would use a different approach to close it. You would add some frames around the dropdown so that when you enter them with your mouse you’d call “mouse enter” and then close the overlay. I’ve added an example of that in the file.

⮑ View Prototype

⮑ View File

It sure can be mind blowing with the amount of ways there are to achieve one result. I still can’t figure this out in my file from what you’ve done but I see you’ve posted something below. Thanks again!

Hello sir, I have to give you one giant THANK YOU! I really appreciate that you gave us the files. The solution for the wider dropdown with the boxes that have interaction “Mouse enter”=“Close overlay” absolutely solved my problem. I hope you sir, have many nice days to come! 🔥

Hello, with the help of Nate_G and his files, and some experimenting, I managed to solve this in mine. You were on the right track here I think. What I would recommend you try first is that on the interaction “Mouse enter” on the option “Add delay” add 1ms delay.

That fixed my problem of the hover state of the Nav button not being activated . With even 1ms delay I was able to see the hover underline state that I had for the button. Hope this helps you or somebody else!