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）”你会看到，第二级与第一级不一样......

Answer 1

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

Correction here

第一个元素会忘记它： 相对于level_1的位置＆gt;李

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

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

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

width:100%上的“.level_2”会自动转换为其父级的宽度

Answer 2

将position:relative添加到level_1 > li

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

Answer 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;
}

Answer 4

嘿，你的第一行6px有li的余量，这就是为什么它有点大了。我会使用左边缘而不是右边缘。这应该固定间距。

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

4 个答案: