CSS - 绝对定位问题

自由之星

我想明白为什么列表中的下拉菜单中没有调整到导航项目的左底边正确。

（我已经尝试添加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>

冷水机

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。