Help understanding why this interaction doesn't seem to work how I envisioned

Hi everyone. So, I’ve been working on hammering out my navigation/menu system and there’s an issue I’ve been stuck on. Let me explain a little about what I am trying to accomplish. A read only link and the published site are posted below.

You’ll see that when hovering over the nav items (the “FEATURED” item) you have the drop down menu that appears and a small gradient bar that also appears to indicate what section of the menu you are looking at. The problem I am having is that I can’t get the mouse hover out animation to trigger properly. It works when leaving the div housing the nav item and gradient bar but when the cursor leaves the dropdown portion, the gradient bar’s mouse out animation doesn’t trigger. I suspect it has something to do with the z-index based on things I’ve read upon searching the form for anyone having a similar issue, but I’m not really sure. The header is fixed. So is the main wrapper for the dropdown section. They are both set to different z-indexes. Yet, at the same time, the animation for that dropdown section, which is applied to the main wrapper of said section seems to be working.

It’s driving me crazy and I just want to understand what is going on with it so I can avoid this issue in the future. Thanks in advance for your time!

Here is a recording of the issue I am trying to resolve Loom | Free Screen & Video Recording Software | Loom

Read-only: Webflow - Hypemode's Dapper Site
Live site:

essentially I am recreating the same site with the same effect that I created here:

just trying to achieve it on webflow