父母容器的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這就是爲什麼它有點大。我會使用餘量而不是權利。這應該修復間距。