Posizione CSS assoluta e larghezza del contenitore padre in percentuale

Question

Sto provando a creare un menu a discesa HTML/CSS che sia flessibile in larghezza. A causa dello position:absolute per il secondo livello della navigazione, non ottengo la larghezza del primo livello. Rimozione della posizione: assoluta sposterà tutti gli elementi seguenti su hover ...

Come posso risolvere questo?

Ecco il codice:

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>

vedere il risultato qui: http://jsfiddle.net/5uf2Y/ Hover "livello uno (1)" e vedrete che il secondo livello non è lo stesso dimensione come il primo livello ...

Answer 1

Hai dimenticato due elementi per la visualizzazione al 100%.

Correction here

1st elementi dimentica è: posizione relativa sul level_1> li

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

2 ° Elementi di correzioni è: dimensioni cambiamento di secondo li

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

Con "width:100%" su .level_2 si trasforma automaticamente con la larghezza del suo genitore

Answer 2

Aggiungi position:relative al level_1 > li

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

Answer 3

tenta di impostare la proprietà body { width:100%;}, si risolverà il problema, come mostrato di seguito (aggiunto al tuo CSS originale):

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

Hey man hai un margine di 6px sulla prima riga li ecco perché è un po 'più grande. Vorrei usare un margine a sinistra anziché a destra. Questo dovrebbe risolvere la spaziatura.