Custom dropdown menus stack when new dropdown is selected

Here is my read-only link: Webflow - WRAPUSA

So I’m running into a problem with my custom dropdown menu that I believe is caused by the fact that the contents of my dropdowns aren’t children of the dropdowns themselves. The reason for this is because I wanted the dropdown contents to span the width of the screen, which to my knowledge is not possible if the contents are children of a smaller element. If this isn’t true then I’m all ears for how I can get around that. Anyways, because of this setup, I need to have the interaction setup in such a way that the contents open on hover, and only close once you hover out of the contents themselves. Of course, now this creates the problem that if someone using the site hovered over multiple dropdowns without hovering out of the contents, the contents will just stack on top of each other which is obviously not ideal. I’m really scratching my head on this issue and not sure if there’s a work around with my current setup and if not, how I would start over to get the same functionality without this issue. I’m open to any solution. Thank you!