Bootstrap 4 multilevel dropdowns are slightly misaligned - css

Question

I have been working with this Bootstrap 4 snippet.
I have adjusted it slightly (so far) but am experiencing a slight drop on each of the subsequent dropdowns.
Here is the css as it stands:
.menu-area {
background: #d61a5e
}
.mainmenu ul li {
position: relative;
}
.mainmenu .dropdown-menu {
margin: 0;
border-radius: 0;
}
.mainmenu a, .navbar-default .navbar-nav > li > a, .mainmenu ul li a, .navbar-expand-lg .navbar-nav .nav-link {
color: #aaa;
font-size: 16px;
text-transform: capitalize;
padding: 16px 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
display: block !important;
}
.mainmenu .active {
color: #fff;
background: #222;
}
/******************************Drop-down menu work on hover**********************************/
.mainmenu {
background: none;
border: 0 solid;
margin: 0;
padding: 0;
min-height: 15px;
width: 100%;
}
#media only screen and (min-width: 767px) {
.mainmenu .collapse ul li:hover > ul {
display: block;
}
.mainmenu .collapse ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 250px;
display: none;
}
/*******/
.mainmenu .collapse ul ul li {
position: relative
}
.mainmenu .collapse ul ul li:hover > ul {
display: block
}
.mainmenu .collapse ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none
}
/*******/
.mainmenu .collapse ul ul ul li {
position: relative
}
.mainmenu .collapse ul ul ul li:hover ul {
display: block
}
.mainmenu .collapse ul ul ul ul {
position: absolute;
top: 0;
left: 100%;
min-width: 250px;
display: none;
z-index: 1
}
}
#media only screen and (max-width: 767px) {
.navbar-nav .show .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 35px
}
.navbar-nav .show .dropdown-menu .dropdown-menu .dropdown-menu > li > a {
padding: 16px 15px 16px 45px
}
}
Having followed the snippet I am not that sure as to why each level is slightly lower than the last. I think its to do with the hover section of the css but I do not know how to adjust this to force it to level up..
I am hoping someone might know how to fix this.
EDIT
Here is the Html for the page.
The thing about Aurelia is that it tries to get out of the way of javascript which might help with those that know JS well.
<template>
<require from="./navmenu.scss"></require>
<require from="./activeRoute"></require>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mainmenu mr-auto">
<a class="navbar-brand" href="#/home">JobsLedger</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li repeat.for="route of router.navigation">
<a href.bind="route.href" if.bind="!route.settings.nav" class=" ${route.href == topUrl ? 'active' : ''}">
${route.title}
</a>
<a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle ${route.href == topUrl ? 'active' : ''}" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${route.title}
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="menu of route.settings.nav">
<a href.bind="menu.href" if.bind="!menu.settings.nav" class="dropdown-menu-link">
${menu.title}
</a>
<a href.bind="menu.href" if.bind="menu.settings.nav" class="dropdown-toggle dropdown-menu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${menu.title} <span class="caret-right"></span>
</a>
<ul if.bind="menu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="subMenu of menu.settings.nav">
<a href.bind="subMenu.href" if.bind="!subMenu.settings.nav" class="dropdown-menu-link">
${subMenu.title}
</a>
<a href.bind="subMenu.href" if.bind="subMenu.settings.nav" class="dropdown-toggle dropdown-subMenu-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
${subMenu.title} <span class="caret-right"></span>
</a>
<ul if.bind="subMenu.settings.nav" class="dropdown-menu" aria-labelledby="navbarDropdown">
<li repeat.for="lowestSubMenu of subMenu.settings.nav">
<a href.bind="lowestSubMenu.href" if.bind="!lowestSubMenu.settings.divider" class="dropdown-menu-link">
${lowestSubMenu.title}
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right mr-auto">
<li repeat.for="route of router.navigation" if.bind="route.settings.pos == 'right'" class="${ row.isActive ? 'link-active' : '' }">
<a href.bind="route.href" if.bind="!row.settings.nav">${ row.title }</a>
<a href.bind="route.href" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
if.bind="route.settings.nav">
${row.title}
<span class="caret"></span>
</a>
<ul if.bind="route.settings.nav" class="dropdown-menu">
<li repeat.for="menu of row.settings.nav">
<a href.bind="menu.href">${menu.title}</a>
</li>
</ul>
</li>
<li><a>Welcome ${userName}</a></li>
<li>Log Out</li>
</ul>
</div>
</nav>
</template>