Menu Dropdown Disappearing on Hover - CSS Issue

Hello,

I’m building a header menu with Beaver Builder and am having trouble with a sub-menu dropdown.

I’m trying to add a small vertical gap between the main menu item and its dropdown box using CSS. When I add margin-top to the sub-menu, the dropdown disappears as soon as I move my mouse off the main menu item because of the gap.

I have tried a few different CSS solutions, including margin-top, padding-bottom, and transform: translateY(), but none have fixed the issue. It seems like a hover state conflict is causing the problem.

Could you please advise on the correct CSS or method to create a small gap without causing the sub-menu to disappear?

Thanks