Question

一个多小时以来，我一直在努力解决这个问题，而且似乎无法解决。

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

我尝试调整dropdown-menu类以及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;
}

What displays on screen when hover over SHOP dropdown

Answer 1

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

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

悬停时折叠菜单的对齐

1 个答案: