Dropdown Menu Disappears on Hover

I have a wordpress site built using Divi.
The problem thats occurring is when I hover over my menu items, the dropdowns show up but when i move my mouse to the dropdown menu, it disappears instantly.

I'm able to fix this on jsfiddle with the following HTML and CSS code:

HTML:
<div class="et_pb_menu__menu" >
<nav class="et-menu-nav">
<ul id="menu-primary-menu settingsMenu" class="et-menu nav">
<li class="et_pb_menu_page_id-77 menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-191 et-touch-hover et-show-dropdown et-hover"><a href="https://albmuslim.ca/about/">About The Mosque</a>
<ul class="sub-menu">
<li class="et_pb_menu_page_id-77 menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="https://albmuslim.ca/about/">History of the Mosque</a></li>
<li class="et_pb_menu_page_id-276 menu-item menu-item-type-post_type menu-item-object-page menu-item-281"><a href="https://albmuslim.ca/the-imam/">The Imam</a></li>
<li class="et_pb_menu_page_id-266 menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-266 current_page_item menu-item-280"><a href="https://albmuslim.ca/the-board/" aria-current="page">The Board</a></li>
<li class="et_pb_menu_page_id-8409 menu-item menu-item-type-post_type menu-item-object-page menu-item-8456"><a href="https://albmuslim.ca/our-latest-projects/">Our Latest Projects</a></li>
</ul>
</li>
</ul>
</nav>
</div>

CSS:
/* Apply styles to the navigation container */
.et_pb_menu__menu {
position: relative;
}
/* Ensure the menu items are styled appropriately */
.et-menu-nav .menu-item-has-children > a {
position: relative;
}
/* Style the submenu items */
.et-menu-nav .menu-item-has-children .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
}
/* Show the submenu on hover or focus within the parent item */
.et-menu-nav .menu-item-has-children:hover .sub-menu,
.et-menu-nav .menu-item-has-children:focus-within .sub-menu {
display: block;
}


Inputting any of this Custom CSS just breaks down my entire site page.
How can I resolve this hover issue.