Navigation toolbar experiment

dabblet.css

/**
 * Navigation toolbar experiment
 */
 
 
@import url(http://fonts.googleapis.com/css?family=PT+Sans);


body{
	background: #111;
	background-image: url(http://kartoffelmos.net/img/noise.png)
	color: #222;
	text-shadow: #404040;
	font-family: PT Sans;
}

nav ul
{
	list-decoration: none;
	padding: 0;
	margin: 0;
}

nav li
{
	display: inline-block;
	padding: 1em;
	font-size: 1.5em;
}

nav li a
{
	color: #222;
	text-shadow: #404040;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: -0.05em;
}


nav li a:active
{
	color: yellow;
}

#whoa.content
{
	display: none;
}

.content {
	font-size: 1.5em;
}

li a:target
{
	color: yellow;
}


#whoa.content:target 
{
	display: inline;
}

dabblet.html

<nav>
	<ul>
		<li><a href=".who" class="who">About me</a></li>
		<li><a href="#what" id="what">What I do</a></li>
		<li><a href="#why" id="why">Wah!</a></li>
	</ul>

</nav>


<div id="content">
	<div id="who" class="content">
		<p>hello world1</p>
	</div>
	<div id="what" class="content">
		<p>hello world2</p>
	</div>
	<div id="why" class="content">
		<p>hello world3</p>
	</div>
</div>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}