Pure CSS magic line system

dabblet.css

/**
 * Pure CSS magic line system
 * Inspiration: http://css-tricks.com/jquery-magicline-navigation/
 * This is a WIP.
 */
a:link, a:visited {
	color:black;
	text-decoration:none;
}
a:hover ~ .magicline {
	left:50px;
}
ul {
	position:relative;
	top:50px;
	left:-20px;
	width:100%;
	background:#9999FF;
	border-top:4px solid transparent;
	background-clip:padding-box;
	box-shadow:0 0 0 4px #9999FF;
	border-radius:5px;
}
li:not(.magicline) {
	display:inline-block;
	margin:0;
	padding:0 4%;
	border-right:1px solid grey;
	border-left:1px solid grey;
	font-size:2em;
}
li.magicline {
	position:absolute;
	top:-5px;
	text-decoration:none;
	width:140px;
	height:9px;
	background:orange;
	z-index:-1;
	transition:all 0.3s ease;
}

dabblet.html

<script type="text/javascript">

</script>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Lorem</a></li>
	<li><a href="#">Ipsum</a></li>
	<li class="magicline"></li>
</ul>

settings.json

{"view":"split","prefixfree":"1","page":"css"}