CSS - 绝对定位问题

Question

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

（我已经尝试将left: 0px添加到适用于水平差距的.dropdown-menu，但我不知道如何处理垂直方向。）

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加top: 100%;，这将使下拉菜单从下拉列表的底部开始。

添加right: 0;或left:0;，使其从下拉列表的任意一侧开始。

请参阅代码段：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;