编辑1

Question

我的li项遇到问题，试图显示一个下拉列表，该下拉列表会自动扩展前一个li。从示例中可以看到li并没有扩展到整个高度。

我需要这样，因为第一个li上的边框底部，这就是为什么它以绝对100％绝对定位的原因。

取消绝对位置会导致下拉容器将自身放置在我显然不希望的边框内。

我已经在li上加了一个图标，下面是一个基本示例。

我也不现实地希望在菜单项类上设置高度，因为下拉菜单中可以包含不同数量的项

.menu-item {
  position: relative;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
}

.dropdown-container {
  position: absolute;
  top: 100%;
}

<ul>
  <li class="menu-item">
    <a>Menu Title</a>

    <div class="dropdown-container">
      <ul>
        <li>Test</li>
      </ul>
    </div>
  </li>

  <li class="menu-item">
    <a>Menu Title</a>
  </li>
</ul>

Answer 1

假设您仍然想在这里border-bottom: 1px solid black;。

.menu-item {
  position: relative;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
}

.dropdown-container {
  top: 100%;
}

<ul>
  <li class="menu-item">
    <a>Menu Title</a>
  </li>
    <div class="dropdown-container">
      <ul>
        <li>Test</li>
      </ul>
    </div>


  <li class="menu-item">
    <a>Menu Title</a>
  </li>
</ul>

您的问题是您设置.dropdown-container的位置，即使您的情况不是必需的。希望这能解决您的问题。

编码愉快！

编辑1

您的问题是您有

<div class="dropdown-container">
  <ul>
    <li>Test</li>
  </ul>
</div>

在Menue项目div中，通过将其取出，有望解决您的问题

CSS | ul> li下拉菜单问题

1 个答案:

编辑1