Any chance to get the result displayed as in

dabblet.css

/**
 * Any chance to get the result displayed as in
 * http://dabblet.com/gist/5235311 without using
 * javascript or having to move the subnav out of .nav?
 */
* { margin: 0; padding: 0; }
li { list-style: none; }
.nav > li { width: 20%; float: left; color: white; min-height: 6ex; }
.nav > li > ul { /* this is supposed to be 100% wide */ }

dabblet.html

<ul class="nav">
	<li style="background: #c00;">1</li>
	<li style="background: #cc0;">
		2
		<ul class="subnav" style="background: #ee8; color: black;">
			<li>Subnav:</li>
			<li>This should</li>
			<li>be 100% wide</li>
			<li>and below the</li>
			<li>main navigation bar</li>
		</ul>
	</li>
	<li style="background: #0c0;">3</li>
	<li style="background: #4cc;">4</li>
	<li style="background: #44f;">5</li>
</ul>
<br style="clear: both;" />
Content: This should be pushed down by the subnav.

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}