pozycja CSS bezwzględne i szerokość kontenera nadrzędnego w procentach

Question

Próbuję zbudować HTML/CSS rozwijane menu, które jest elastyczne szerokości. Z powodu position:absolute dla drugiego poziomu nawigacji, nie otrzymuję szerokości pierwszego poziomu. Zdejmowanie position: absolute przeniesie wszystkie następujące elementy przy aktywowaniu ...

Jak mogę rozwiązać ten problem?

Oto kod:

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>

Zobacz wynik tutaj: http://jsfiddle.net/5uf2Y/ Hover "Poziom pierwszy (1)", a zobaczysz, że drugi poziom nie jest taki sam wielkość jak na pierwszym poziomie ...

Answer 1

Trzeba zapomnieć dwa elementy wyświetlacza 100%.

Correction here

1st elementy zapomina to: względnym położeniu na level_1> li

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

2. Elementy korekty to: wielkość zmiany 2nd li

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

Z „width:100%” na .level_2 automatycznie włącza do szerokości rodzica

Answer 2

Dodaj position:relative do level_1 > li

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

Answer 3

spróbuj ustawić właściwość body { width:100%;} będzie rozwiązać ten problem, tak jak pokazano poniżej (dodano do oryginalnego 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

Hej człowieku, masz margines z 6px w pierwszym rzędzie li, dlatego jest nieco większy. Użyłbym raczej marginesu niż prawego. To powinno naprawić odstępy.