Выравнивание свернутого меню при наведении

Question

Я пытаюсь обойти эту проблему уже более часа и не могу исправить.

Когда мое навигационное меню сворачивается, и я наводю указатель мыши на элемент 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;
}

Что отображается на экране при наведении указателя мыши на SHOP

Answer 1

Вам нужно добавить position:absolute в dropdown-menu селектор. Попробуйте этот код.

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