CSS 绝对位置和父容器的宽度百分比

Question

我正在尝试构建一个宽度灵活的 HTML/CSS 下拉菜单。由于 position:absolute 对于第二级导航，我没有得到第一级的宽度。删除位置：绝对将在悬停时移动所有以下元素…

我该如何解决这个问题？

这是代码：

 ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.level_1 > li {
  float: left;
  width: 45%;
  background-color: #2FA4CF;
  margin-right: 6px;
}

.level_1 > li:hover ul {
  display: block;
}

.level_2 {
  display: none;
  position: absolute;
  width: 45%;
}

.level_2 li {
  background-color: #535B68;
}

 <ul class="level_1">
  <li>
    <a href="#">Level one (1)</a>
    <ul class="level_2">
      <li><a href="#">Level two (1)</a></li>
    </ul>
  </li>
  <li><a href="#">Level one (2)</a></li>
</ul>

<p>Paragraph</p>

在此处查看结果：http: //jsfiddle.net/5uf2Y/ 将鼠标悬停在“第一级 (1)”上，您会看到第二级与第一级的大小不同……

原文由 chris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您忘记了用于显示 100% 的两个元素。

更正这里

第一个元素忘记了它：相对于 level_1 > li 的 位置

.level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    **position:relative;**
}

第二个元素更正它是： 更改第二个 li 的大小

.level_2 {
    display: none;
    position: absolute;
    width: 100%;
}

在 --- 上使用“ width:100% .level_2 ，它会自动以其父级的宽度显示。

原文由 artSx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

添加 position:relative 到 level_1 > li

 .level_1 > li {
    float: left;
    width: 45%;
    background-color: #2FA4CF;
    margin-right: 6px;
    position:relative;
}

原文由 Lowkase 发布，翻译遵循 CC BY-SA 3.0 许可协议