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%; 这将使 下拉菜单 从 下拉菜单 的底部开始。

并添加 right: 0; 或 left:0; 使其从 下拉菜单的任一侧开始 。

查看代码片段：

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

CSS - 绝对定位问题

CSS - absolute positioning issue

html

css-position

absolute