Site Nav Idea

dabblet.css

/**
 * Site Nav Idea
 */
body { font:1em/1.5 Georgia, serif; }
.nav { margin-left: 0; list-style: none; }
.nav li { display: inline; }
.nav a { display: inline-block; text-decoration: none; }
.dropdown { position: absolute; visibility: hidden; }

.site-nav > li {
	position: relative;
	border-left: 1px solid hsla(0,0%,60%,1);
}

.site-nav li:last-child {
	border-right: 1px solid hsla(0,0%,60%,1);
}

.site-nav a {
	font-size: 1.125em;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: hsla(0,0%,60%,1);
	padding: 0 1em 0 1em;
	transition: all .5s ease;
}

.site-nav > li > a:hover {
	padding: 0 2em 0 2em;
	color: #fff;
	background-color: hsla(0,100%,50%,.7);
}

dabblet.html

<nav class="">
	<ul class="nav site-nav">
	    <li><a href="#">home</a></li>
	    <li><a href="#">blog</a></li>
	    <li><a href="#">work</a>
	        <ul class="dropdown">
	            <li><a href="#">link</a></li>
	            <li><a href="#">link</a></li>
	            <li><a href="#">link</a></li>
	            <li><a href="#">link</a></li>
	        </ul>
	    </li>
	    <li><a href="#">about</a></li>
	</ul>
</nav>

settings.json

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