父容器的 CSS 绝对位置和宽度（以百分比表示）答案

【问题标题】：CSS position absolute and width of parent container in percent父容器的 CSS 绝对位置和宽度（以百分比表示）
【发布时间】：2022-01-16 21:13:09
【问题描述】：

我正在尝试构建一个宽度灵活的 HTML/CSS 下拉菜单。由于第二级导航的position:absolute，我没有得到第一级的宽度。删除 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/ 将鼠标悬停在“Level one (1)”上，您会看到，第二层的大小与第一层的大小不同...

【问题讨论】：

标签： html css drop-down-menu css-position

【解决方案1】：

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

Correction here

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

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

第二个元素更正： 改变第 2 里的大小

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

.level_2 上的“width:100%”会自动显示为其父级的宽度。

【讨论】：

【解决方案2】：

将position:relative 添加到level_1 > li

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

【讨论】：

我认为这不能解决问题。他希望间距相同，他有一个margin-right，它提供了额外的空间

【解决方案3】：

尝试设置body { width:100%;} 属性，它将解决此问题，如下所示（添加到您的原始CSS）：

body{ width:100%;}
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;
}

【讨论】：

【解决方案4】：

嘿，伙计，你的第一行有 6px 的边距 li 这就是为什么它要大一点。我会使用左边而不是右边的边距。这应该可以修复间距。

【讨论】：

Nm，看来您必须在宽度上增加 44% 才能使其工作，但这不是我假设您正在寻找的响应式吸引力。