hucklesby/dabblet.css

## dabblet.css
/**
 * Full-width vertically centered menu bar
 * Addendum to solutions from Roger Johansson
 * http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/
 */
body {
	margin: 3em 0 0;
	background-color: #f0f0f0;
	color: #000;
}

.nav-main ul {
	display:table;	/* Make the ul behave like a table */
	border-collapse:collapse;	/* Collapse touching borders */
	width:100%;	/* Make it full-width */
	margin:0 0 20px;	/* Some bottom margin (also resets browser default margin for ul in case there isn’t already a reset for that) */
	padding:0;	/* Remove any browser default padding */
	list-style:none;	/* No list bullets, please */
}

.nav-main li {
	display:table-cell;	/* Make the li elements behave like table cells */
	width:1%;	/* By giving them a small width they will magically be stretched to fill the width of the table */
	border:1px solid #ddd;
	background:#eee;
	vertical-align:middle;	/* Vertically center their content */
	text-align:center;	/* Horizontally center their content */
}

.nav-main a {
	display:block;
	padding:10px;
	color:#000;
	text-decoration:none;
}

.nav-main a:hover,.nav-main a:focus {
	outline:none;
	color:#fff;
	background:#000;
}

.nav-main.active li:hover {
	cursor:pointer;
}

.nav-main.active li:hover,.nav-main.active li.focus {
	background:#000;
}

.nav-main.active li:hover a {
	color:#fff;
}

/*	Following code added to make all links full height  */

.nav-main li {
	overflow-y: hidden;
}

.nav-main a {
	padding: 2.5em .5em;
	margin: -2em 0;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="nav-main" role="navigation">
	<ul>
		<li><a href="#void">Home</a></li>
		<li><a href="#void">Section two</a></li>
		<li><a href="#void">Section three</a></li>
		<li><a href="#void">Another section</a></li>
		<li><a href="#void">A section with a longer name</a></li>
		<li><a href="#void">Section six</a></li>
		<li><a href="#void">This is section seven</a></li>
		<li><a href="#void">Section 8</a></li>
	</ul>
</div>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Full-width vertically centered menu bar
	* Addendum to solutions from Roger Johansson
	* http://www.456bereastreet.com/archive/201310/full-width_justified_vertically_centered_navbar/
	*/
	body {
	margin: 3em 0 0;
	background-color: #f0f0f0;
	color: #000;
	}

	.nav-main ul {
	display:table; /* Make the ul behave like a table */
	border-collapse:collapse; /* Collapse touching borders */
	width:100%; /* Make it full-width */
	margin:0 0 20px; /* Some bottom margin (also resets browser default margin for ul in case there isn’t already a reset for that) */
	padding:0; /* Remove any browser default padding */
	list-style:none; /* No list bullets, please */
	}

	.nav-main li {
	display:table-cell; /* Make the li elements behave like table cells */
	width:1%; /* By giving them a small width they will magically be stretched to fill the width of the table */
	border:1px solid #ddd;
	background:#eee;
	vertical-align:middle; /* Vertically center their content */
	text-align:center; /* Horizontally center their content */
	}

	.nav-main a {
	display:block;
	padding:10px;
	color:#000;
	text-decoration:none;
	}

	.nav-main a:hover,.nav-main a:focus {
	outline:none;
	color:#fff;
	background:#000;
	}

	.nav-main.active li:hover {
	cursor:pointer;
	}

	.nav-main.active li:hover,.nav-main.active li.focus {
	background:#000;
	}

	.nav-main.active li:hover a {
	color:#fff;
	}

	/* Following code added to make all links full height */

	.nav-main li {
	overflow-y: hidden;
	}

	.nav-main a {
	padding: 2.5em .5em;
	margin: -2em 0;
	}
	<!-- content to be placed inside <body>…</body> -->
	<div class="nav-main" role="navigation">
	<ul>
	<li><a href="#void">Home</a></li>
	<li><a href="#void">Section two</a></li>
	<li><a href="#void">Section three</a></li>
	<li><a href="#void">Another section</a></li>
	<li><a href="#void">A section with a longer name</a></li>
	<li><a href="#void">Section six</a></li>
	<li><a href="#void">This is section seven</a></li>
	<li><a href="#void">Section 8</a></li>
	</ul>
	</div>