CSS位置的绝对值和父容器的宽度（以百分比为单位）

Question

我正在尝试构建宽度灵活的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/将鼠标悬停在“第一级（1）”上，您将看到第二级的大小与第一级不同...

Answer 1

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

在这里更正

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

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

第二元素更正是：更改第二锂的大小

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

在.level_2上使用“ width:100% ”时，它将自动以其父级的宽度旋转

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这就是为什么它有点大。 我将使用左边距而不是右边距。 那应该固定间距。