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: 0 1px 0 #303030;
	font-family: PT Sans;
}

body

 ::selection
{
	background: #F660AB;
}

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

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

a
{
	text-decoration: none;
}

nav a
{
	color: #222;
	text-transform: uppercase;
	letter-spacing: -0.05em;
	transition: color ease-in-out 0.08s;
}

.content a
{
	color: #1DC2CD;

}


.content a:hover
{
	text-decoration: underline;
}


nav a:hover
{
	color: #404040;
}



.content
{
	display: none;
}

.content {
	font-size: 1.5em;
	color: #eaeaea;
}


.content:target 
{
	display: inline;
}

#who:target~nav #who_button, 
#what:target~nav #what_button,
#why:target~nav #why_button
{
	color: #eaeaea;
	text-shadow: 1px 1px 2px #333, -1px -1px 2px #333, 1px -1px 2px #333, -1px 1px #333;
	border-bottom: 2px dotted;
}

#hack {
	position: relative;
	padding-top: 3em;
	width: 480px;
}

#hack nav
{
	position: absolute;
	top: 0;
	left: 0;
	height: 3em;
}

#who_button:focus
{
	background: pink;	
}

nav
{	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

dabblet.html

<div id="hack">

	<div id="who" class="content">
		<p>
			Who am I? <a href="http://twitter.com/kartoffelmos">@kartoffelmos</a>, that's who!
		</p>

	</div>
	
	<div id="what" class="content">
		<p>
			What do I do? Stuff, I guess.
		</p>
	</div>

	<div id="why" class="content">
		<p>
			To avoid using JavaScript I've made a personal record in ugly CSS hack and slashery. Was it worth it? It does have some educational value I guess.
		</p>
		
		<p>
			Todo: rawr
		</p>
	</div>

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

</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}