Dropdown Menu z-index Problem

I am following this tutorial on how to create a drop down mega menu: Building a mega menu in Webflow - YouTube

I am having an issue where my Div which contains the Dropdown content pushes the Section which sits below the Nav down. This happens when the hover interaction is triggered by hovering the menu item and the Dropdown div appears.

My solution was to set the section below the menu to have a position Relative and then have a z-index lower than the entire Menu Div. This doesn’t seem to have an effect. I’ve tried everything, not sure what I am doing wrong.

Here is a video of the problem, with my z-index-ing clarified: Loom | Free Screen & Video Recording Software


Here is my site Read-Only: LINK

I am watching the same video and I have a different problem. When the menu scrolls, it overlaps with the section at the bottom. I also share my project if anyone has a solution. Thanks

https://preview.webflow.com/preview/fineaste-8bd908?utm_medium=preview_link&utm_source=designer&utm_content=fineaste-8bd908&preview=824550e3e7f92445e7cbf8cb78303c35&pageId=6114e516a2c30958ec4f085b&workflow=preview