Dropdown Mega Menus Not Updating Correctly On Hover

Design help Animations & Interactions
1

Hey all, I’m configuring a dropdown mega menu using triggers for Hover In/Hover Out actions.

It nearly works, but I’m having a small issue. The mega menus drop down as you scroll over their respective Nav Links, but when you scroll back over the different Nav Links (after scrolling over them once), the mega menus don’t update to the Nav Link selected.

Screen Shot 2022-07-12 at 5.18.13 PM
Screen Shot 2022-07-12 at 5.18.13 PM1594×156 42.5 KB

When I look closely at the bottom borderline of the mega menus, it seems to get darker with every additional mega menu that loads, leading me to believe that the mega menus are loading on top of each other and staying there until they’re literally all displayed at once on top of each other. Really weird.

Any input would be awesome, appreciate it.

  1. I’ve configured the Nav Links (nav-link-3) to “Show” the mega menu for that specific dropdown link on “Mouse hover”
  2. I’ve configured the Mega Menus (“dropdown-mega-charts”) to “Hide” itself on “Mouse hover out”

Read only link: https://preview.webflow.com/preview/early-retirement-remote-working-guide?utm_medium=preview_link&utm_source=designer&utm_content=early-retirement-remote-working-guide&preview=28d61e7fec1499d99c263dfd8a43d0dd&pageId=62c6acfda0b8f0b0e2893880&workflow=preview

Live link: https://early-retirement-remote-working-guide.webflow.io/blog-posts

How it should work (the template I used): https://headspace-navigation.webflow.io/

Thanks!