html - CSS - 绝对定位问题

Question

我想了解为什么下拉菜单的列表没有正确调整到导航项的左下边缘。

(我已经尝试将 left: 0px 添加到 .dropdown-menu 中，这对水平间隙工作正常，但我不知道如何处理垂直。)

.navbar {
  padding-left: 0;
  list-style-type: none;
  background-color: #252525;
  font-size: 0;
  /* to remove white-space gap between child blocks */
}

.navitem {
  font-size: 1.0rem;
  /* root eM*/
  margin: 0;
  padding: 10px;
  text-align: center;
  display: inline-block;
  color: white;
  cursor: pointer;
}

.navitem:hover {
  background-color: black;
}

.dropdown {
  position: relative;
  border: 1px solid red;
}

.dropdown-menu {
  padding: 0;
  /*left:0px;*/
  position: absolute;
  min-width: 100%;
  text-align: left;
  list-style-type: none;
  background-color: #252525;
}

<ul class="navbar">
  <li class="navitem link">Link1</li>
  <li class="navitem link">Link2</li>
  <li class="navitem link">Link3</li>
  <li class="navitem dropdown">
    <div>Dropdown</div>
    <ul class="dropdown-menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>

  </li>
</ul>

Answer 1

添加 top: 100%; 这将使 dropdown-menu 从 dropdown 的底部开始。

并添加 right: 0; 或 left:0; 使其从 dropdown 的任一侧开始。

查看代码片段:

.navbar {
  padding-left: 0;
  list-style-type: none;
  background-color: #252525;
  font-size: 0;
  /* to remove white-space gap between child blocks */
}

.navitem {
  font-size: 1.0rem;
  /* root eM*/
  margin: 0;
  padding: 10px;
  text-align: center;
  display: inline-block;
  color: white;
  cursor: pointer;
}

.navitem:hover {
  background-color: black;
}

.dropdown {
  position: relative;
  border: 1px solid red;
}

.dropdown-menu {
  padding: 0;
  /*left:0px;*/
  position: absolute;
  min-width: 100%;
  text-align: left;
  list-style-type: none;
  background-color: #252525;
  top: 100%;
  right: 0;
}

<ul class="navbar">
  <li class="navitem link">Link1</li>
  <li class="navitem link">Link2</li>
  <li class="navitem link">Link3</li>
  <li class="navitem dropdown">
    <div>Dropdown</div>
    <ul class="dropdown-menu">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
    </ul>

  </li>
</ul>