abitgone/two-level-nav.html

## two-level-nav.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Two-Level Split Navigation Test</title>
		<style>
		html {
			font-size: 13px;
			font-family: Helvetica, Arial, sans-serif;
		}
		.MainNav {
			display: block;
			position: relative;
			border: 0.077em solid rgba(255,255,255,0.5);
			box-shadow: 0 0 0.231em rgba(0,0,0,0.5);
			border-radius: 0.231em;
			/* Moved gradient to .MainNav instead of .TopNav */
			background: rgba(0,0,0,0.1);
			background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5), rgba(255,255,255,0));
		}
		.MainNav ul {
			clear: both;
			padding: 0;
			list-style: none;
			display: block;
			margin: 0;
		}
		.MainNav li {
			list-style: none;
			display: block;
			float: left;
			margin: 0;
		}
		.MainNav a {
			display: block;
			padding: 0.615em 0.769em;
		}
		.TopNav a {
			border-right: 0.077em solid rgba(0,0,0,0.125);
		}
		.MainNav li:first-of-type a {
			padding-left: 1.538em;

		}
		.SubNav a {
			padding-top: 0.461em;
			padding-bottom: 0.461em;
		}
	 	.MainNav ul:after { /* This will need a little more robust IE clearfixing */
			display: block;
			content: "";
			clear: both;
			line-height: 0;
			height: 0;
			visibility: hidden;
		}
		.MainNav a {
			text-decoration: none;
		}
		.TopNav a {
			font-weight: bold;
			color: rgba(0,0,0,0.5);
			text-shadow: 0 -0.077em #fff;
		}
		.TopNav .Selected a,
		.SubNav {
			/* Dark Gradient */
			background: rgba(0,0,0,0.5);
		}
		.TopNav .Selected a {
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.25), rgba(0,0,0,0.125));
		}
		.SubNav {
			background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.125), rgba(0,0,0,0));
			border-bottom-left-radius: 0.231em;
			border-bottom-right-radius: 0.231em;
		}
		.TopNav .Selected a {
			text-align: -0.077em;
		}
		.TopNav .Selected a,
		.SubNav a {
			color: #fff;
			text-shadow: 0 0.077em rgba(0,0,0,0.5);
		}

		</style>
	</head>
	<body>
		<h1>Nav Test</h1>
		<nav class="MainNav">
			<ul class="TopNav">
				<li><a href="#">Section</a></li>
				<li><a href="#">Section</a></li>
				<li class="Selected"><a href="#">Selected Section</a></li>
				<li><a href="#">Section</a></li>
				<li><a href="#">Section</a></li>
				<li><a href="#">Section</a></li>
				<li class="last"><a href="#">Section</a></li>
			</ul>
			<ul class="SubNav">
				<li><a href="#">Sub Section</a></li>
				<li><a href="#">Sub Section</a></li>
				<li><a href="#">Sub Section</a></li>
				<li><a href="#">Sub Section</a></li>
				<li class="last"><a href="#">Sub Section</a></li>
			</ul>
		</nav>
	</body>
</html>