Magento 2 dropdown navigation sub level unreachable

The Problem

When building a new theme using the Blank magento 2 theme as the parent, our dropdown navigation is not working as intended. Below is a picture of the current result. As you can see we went down 3 levels with no problem, as they were all the top item of each level. However when we go down to the bottom one which is highlighted in red, the next step in the dropdown menu appears at the top.

What I know so far

When inspecting these elements, one piece of code stands out, which if I remove, it causes a separate issue where the menu shows up next to the item, BUT 53 pixels too low, also making it impossible to reach.

The code I am referring to is located in lib/web/css/source/lib/_navigation.less and is

.submenu {
   top: 0 !important;
   left: 100% !important;
}

I know that there is a JS component to this menu, but im not sure what to do about it. I have tried messing with the inspector as much as I could to get it to work with just CSS, but it seems to be dynamically generated.