汉堡菜单下拉菜单未出现在其正下方

Question

汉堡菜单下拉列表不会出现在其正下方，而是出现在页面的中央。

你能帮我让下拉菜单出现在汉堡菜单的正下方而不是其他地方吗？

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  min-width: 150px;
}

.navbar-nav .nav-link {
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script srrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark">
  <div class="container">
    <a class="navbar-brand" href="#"><img src="images/headerlogo.png" alt="Logo"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item 3</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item 4</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Menu Item 5</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

为了确保下拉菜单出现在汉堡菜单的正下方，您需要调整 .navbar-collapse 类的位置。目前，它是绝对定位的，这导致它相对于最近的定位祖先（在本例中为 .container div）进行定位。要使其显示在汉堡菜单下方，您可以将其相对于 .navbar-toggler 按钮定位。

.navbar-collapse {
  position: absolute;
  top: calc(100% + 10px); /* Adjust as needed for spacing */
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  min-width: 150px;
}

.navbar-toggler {
  position: relative; /* Ensure relative positioning for the dropdown */
}