Untitled

dabblet.css

body {
	border-top: 8px solid #009de0;
	margin: 0;
}

header {
	margin: -8px 0 0 0;
	background-color: #eee;
	min-height: 200px;
}

header > div {
	width: 60%;
	margin: 0 auto	
}

nav {
	width: 100%;
	display: table;
}

ul {
	display: table-cell;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 10%
}

li {
	display: table-cell;
}

.fill {
	border-top: 8px solid #009de0;
	display: table-cell;
}

a {
	transition: all 500ms ease-in-out;
}

a:link, a:visited {
	display: block;
	border-top: 8px solid #009de0;
	padding: 4em 0.3em 0 0.3em;
	text-decoration: none;
	white-space: nowrap;
	color: #000;
}

a:hover, a:focus {
	border-top: 8px solid transparent;
	border-bottom: 8px solid #009de0;
}

.active a:link, .active a:visited {
	border-top: 0px solid transparent;
	margin-top: 8px;
	border-bottom: 8px solid #009de0;
}

dabblet.html

<header><div>
	<nav>
		<ul>
			<li><a href="/">Menu 1</a></li>
			<li class="active"><a href="/">Menu 2</a></li>
			<li><a href="/">Menu 3</a></li>
		</ul>
		<span class="fill"></span>
	</nav>
</div></header>

dabblet.js

// alert('Hello world!');

settings.json

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