Positioning of mega menu - CSS problems

Site URL: https://musgrove.co/

I'm having issues placing my mega menu (JS and CSS) close enough to the navigation link that it closes before I can hover over the page. I have built this by adding an additional section under my main footer, then added the following JS:

<!-- Wedding Tab Megamenu JS-->
<script>
$(function(){
   $('.header-display-desktop [href="/weddings"] + .header-nav-folder-content').append($('#footer-sections section:nth-of-type(2)'))
});
</script>
<!-- End Wedding Tab Megamenu JS—>

When I hover over the 'Weddings' navigation link, my page does open and displays correctly. However, when I move my mouse off the link, it disappears too quickly (unless I move really fast which is terrible for UX). I attempted to add a spacer and then move it up, but z-index is not working to have the mega menu appear behind the main menu (since they both have white background, this is OK). I want to have some top-padding anyway but need to have the mega-menu appear longer to they can get to all the other links.

Here is my CSS:

.header-display-desktop [href="/weddings"] + .header-nav-folder-content{
  width:100vw;
  right:0vw !important;
  left:0vw !important;
  transition: opacity .6s linear;
  a {background-image:none !important;}
  position:fixed;
  top:7%;
  box-sizing:border-box;
  padding:5px;
  border-bottom:2px solid #003d0f;
  box-shadow:0px 3px 3px #003d0f;
  .header-nav-folder-item{
    display:none;
  }
  a{
    display:inline !important;
  }
  .sqs-block-button-element{
    display:inline-block !important;
    padding: 1em 1.6em !important;    
  }
  
}

Is there a way to keep the mega-open just a fraction of a second longer so people can easily move their cursor to the mega-menu? 

(Sorry the website is still in "staging" so it is not active to inspect)

I have been trying to figure this out for three hours and I'm throwing in the towel.

HELP!!!

Eric

Hi. Where is mega menu? I just checked & dont see.

https://kale-calliope-86yf.squarespace.com/

pw: 1234