Alignment of collapsed menu on hover - html

Question

I have been trying to wrap my head around this issue for over an hour now and can't seem to fix.
When my nav menu collapses and I hover mouse over the SHOP item in menu, it moves the SHOP element to the left. When I mouse away, it goes back to middle position. SHOP should stay in line with the other two menus (NOT move left)
I have tried adjusting the dropdown-menu class as well as CSS for dropdown but still no fix.
Any push in right direction is appreciated. Thanks
HTML:
<div class="collapse navbar-collapse nav-layout" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="index">HOME</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle"dropdown" aria-haspopup="true" aria-expanded"false">SHOP</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="products">Tealights</a>
<a class="dropdown-item" href="products">Wax-Melts<span class="sr-only">(current)</span></a>
<a class="dropdown-item" href="products">Medium Candle</a>
<a class="dropdown-item" href="products">Large Candle</a>
<a class="dropdown-item" href="products">X-Large Candle</a>
</div>
</li>
<li>
<a class="nav-link" href="contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
CSS:
.narbar-default .navbar-nav > li.dropdown:hover > a,
.narbar-default .navbar-nav > li.dropdown:hover > a:hover,
.narbar-default .navbar-nav > li.dropdown:hover > a:focus, {
color: rgb(100, 100, 100);
}
.dropdown:hover > .dropdown-menu {
display: block;
background-color: #909090;
}
What displays on screen when hover over SHOP dropdown

Answer 1

You need to add position:absolute to teh dropdown-menu selector. Try this code.
.dropdown {
position: relative;
}
.dropdown > .dropdown-menu {
position: absolute;
left: 0;
top: 100%;
z-index: 2;
}