父母容器的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）”，你会看到，第二个层次是不一样的尺寸像第一级...

Answer 1

你已经忘了两个显示100％的元素。

Correction here

第一元件忘记它是：相对于上LEVEL_1 位置>利

.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这就是为什么它有点大。我会使用余量而不是权利。这应该修复间距。