Elemento hijo que ocupe toda la pantalla

Hola:

Tengo un elemento, la cabecera, que ocupa todo el ancho de la pantalla (el 100%). En él tengo una lista (<ul>) y sus correspondientes elementos (<li>) con enlaces.
La cabecera como ya dije ocupa el ancho total de la pantalla, el 100%. Dentro de la lista de la cabecera, un elemento va a ser un "desplegable". Lo que quiero es que el desplegable, ocupe también el 100% de ancho de la pantalla.

De momento he dejado el código así:

HTML

<header>
<ul>
  <li><a href="">enlace</a></li>
  <li class="desplegable"><a href="#">enlace desplegable</a> <div class="desplegado">contenido que aparecerá en el menú desplegable</div></li>
  <li><a href="">enlace</a></li>
</ul>
</header>

CSS

header {
  max-width: 100%;
}

header > ul > li .desplegado {
  display: none;
  position: absolute;
  overflow: hidden;
  top: 50px;
  left: 0;
  width: 100%;
  background: #fff;
}


header > ul > li:hover .desplegado {
  display: block;
}

Es sólo la parte del header que es la importante.
El problema es que el menú desplegable sólo ocupa el ancho de la lista y no el del total de la pantalla. Qué puedo hacer para cambiarlo?

Saludos

borrar error del internet