悬停时折叠菜单的对齐方式

Question

我已经尝试解决这个问题一个多小时了，但似乎无法解决。

当我的导航菜单折叠并且我将鼠标悬停在菜单中的 SHOP项上时，它会将SHOP元素向左移动。当我鼠标离开时，它会回到中间位置。SHOP应与其他两个菜单保持一致(不要向左移动(

我尝试调整下拉菜单类以及下拉菜单的 CSS，但仍然没有修复。

任何朝着正确方向的推动都是值得赞赏的。谢谢

.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;
}

将鼠标悬停在"商店"下拉菜单上时屏幕上显示的内容

Answer 1

您需要将position:absolute添加到dropdown-menu选择器中。试试这段代码。

.dropdown {
position: relative;
}
.dropdown > .dropdown-menu {
position: absolute;
left: 0;
top: 100%;
z-index: 2;
}