Posición absoluta de CSS y ancho del contenedor principal en porcentaje

Estoy tratando de crear un menú desplegable HTML/CSS que sea flexible en ancho. Debido a la position:absolute para el segundo nivel de navegación, no obtengo el ancho del primer nivel. Eliminar la posición: absoluta moverá todos los elementos siguientes al pasar el mouse …

¿Como puedo resolver esto?

Aquí está el código:

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>

Vea el resultado aquí: http://jsfiddle.net/5uf2Y/
Pase el cursor sobre “Nivel uno (1)” y verá que el segundo nivel no es del mismo tamaño que el primer nivel…

Ha olvidado dos elementos para mostrar al 100%.

Corrección aquí

Los primeros elementos olvidan que es:

Posición relativa en level_1 > li

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

Las correcciones del segundo elemento son:

cambiar el tamaño de 2nd li

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

Con “width:100%” en .level_2 resulta automáticamente con el ancho de su padre.

Agregar position:relative a level_1 > li

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

Trate de configurar el body { width:100%;} property, solucionará este problema, como se muestra a continuación (agregado a su CSS original):

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;
}

Hey hombre tienes un margen de 6px en tu primera fila li por eso es un poco mas grande. Yo usaría un margen izquierdo en lugar de derecho. Eso debería arreglar el espacio.