Bootstrap 4 third level child menu not on the right side - css

Question

I'm using the following Bootstrap 4 theme in Wordpress: https://cutt.ly/QfzDnKv
I'm using the Bootstrap 4 navbar with third level child menu's which is not by Bootstrap 4 defaults supported. That's why I used this custom CSS in Bootstrap 4:
https://www.codeply.com/go/ji5ijk6yJ4
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top:-6px;
}
/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
I have now a situation that my child menu's will be shown up on the bottom of each parent menu:
In the example above Exact needs to show up on the right side of the parent menu (like the codeply example). Could anyone tell me what I have to adjust in order to let it show up the correct way? I'm struggling already 1 week with this.
Thanks!
grid

Answer 1

Try this code.
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top:-6px;
}
/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="http://google.com">Google</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Submenu</a></li>
<li><a class="dropdown-item" href="#">Submenu0</a></li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu1</a></li>
</ul>
</li>
<li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
<li><a class="dropdown-item" href="#">Subsubmenu2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>

Answer 2

I fixed this actually by using the answer of Bhautik. I tried his code line by line and came to the conclusion that the following CSS could be used:
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top:-6px;
}
Thanks,
Have a nice day.