親要素の幅を指定して、子要素の幅を100%にする

タイトルだと分かりにくいですが、横並びのナビゲーションでクリック時にプルダウン表示させる挙動のときに、プルダウンの中身は画面幅に広げたいみたいなときの話です。

サンプルコード

最初にやろうとしてうまくいかなかったコードです。

HTML

<header>
	<ul id="nav">
		<li class="level1">
			<a href="">ナビ1</a>
			<ul class="level2">
				<li><a href="">子ナビ1-1</a></li>
				<li><a href="">子ナビ1-2</a></li>
				<li><a href="">子ナビ1-3</a></li>
			</ul>
		</li>
		<li class="level1">
			<a href="">ナビ2</a>
			<ul class="level2">
				<li><a href="">子ナビ2-1</a></li>
				<li><a href="">子ナビ2-2</a></li>
				<li><a href="">子ナビ2-3</a></li>
			</ul>
		</li>
		<li class="level1">
			<a href="">ナビ3</a>
			<ul class="level2">
				<li><a href="">子ナビ3-1</a></li>
				<li><a href="">子ナビ3-2</a></li>
				<li><a href="">子ナビ3-3</a></li>
			</ul>
		</li>
	</ul>
</header>

CSS

header {
	width: 100%;
}
#nav .level1 {
	position: relative;
	float: left;
	width: 100px;
}
#nav .level2 {
	display: none;
	position: absolute;
	top: 23px;
	left: 0;
	width: 100%;
}

.level1を幅固定+floatして、.level2をwidth:100%;にしようと思っていたのですが、よく考えると.level1の幅を固定しているので.level2の幅も同じだけしか広がりませんでした。
うまくいかなかった場合のデモページ
　

サンプルコード2

.level2のposition:absolute;の基準を.level1ではなく、画面幅に表示されているheaderにすることで想定の表示になりました。

CSS

header {
	position: relative;
	width: 100%;
}
#nav .level1 {
	float: left;
	width: 100px;
}
#nav .level2 {
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
	width: 100%;
}

うまくいった場合のデモページ