CSS3 Vimeo Nav

dabblet.css

/**
 * CSS3 Vimeo Nav
 */
 * { box-sizing: border-box }
 
 body { 
 	font-size: 65.25%;
 	font-family: Verdana;
 }
 
 ul.nav {
 	display: inline-block;
 	margin: 0 0 0 164px;
 	position: absolute;
 	top: 0;
 }
 ul.nav,
 ul.nav li ul {
 	background: #172322;
 	border-radius: 0 0 10px 0;
 	color: #FFF;
 	font-size: 1.1em;
 	line-height: 4.1em;
 	list-style: none;
 	padding: 0 20px;
 }
 h1.title {
 	background: #9fc54e;
 	border-radius: 0 0 0 10px;
 	color: #FFF;
 	height: 50px;
 	margin: 0;
 	padding: 12px;
 	position: absolute;
 	top: 0;
 	/*width: 150px;*/
 }
 ul.nav li {
 	display: inline-block;
 	height: 50px;
 	position: relative;
 	padding: 0 10px;
 }
 ul.nav li:hover {
 	color: #B0D730;
 }
 ul.nav li ul {
 	border-radius: 0 0 10px 10px;
 	display: none;
 	left: 0;
 	line-height: 1em;
 	margin: 0;
 	padding: 15px;
 	position: absolute;
 	width: auto;
 	top: 35px;
 }
 ul.nav li ul li {
 	border-bottom: 1px dotted #444;
 	color: #0395cc;
 	display: block;
 	height: auto;
 	padding: 5px 0;
 	white-space: nowrap;
 }
 ul.nav li ul li:hover {
 	color: #7FCDFE;

 }
 ul.nav li ul li:last-child {
 	border-bottom: 0;
 	padding: 5px 0 0 0;
 }
 ul.nav li ul:before,
 ul.nav li ul:after,
 ul.nav li li:first-child:before,
 ul.nav li li:first-child:after {
 	background: #172322;
 	content: "";
 	height: 15px;
 	left: -15px;
 	position: absolute;
 	top: 15px;
 	width: 15px;
 }
 ul.nav li li:first-child:before, 
 ul.nav li li:first-child:after {
 	background: #FFF;
 	border-radius: 20px;
 	height: 30px;
 	left: -45px;
 	top: 0px;
 	width: 30px;
 	z-index: 2;
 }
 ul.nav li ul:after {
 	left: auto;
 	right: -15px;
 }
 ul.nav li li:first-child:after {
 	left: auto;
 	right: -45px;
 }
 ul.nav li:hover ul {
 	display: block;
 }

dabblet.html

<h1 class="title">Vimeo CSS3</h1>
<ul class="nav">
	<li>Log In</li>
	<li>Explore

		<ul>
			<li>Video School</li>
			<li>Music Store</li>
			<li>Perks</li>
			<li>Categories</li>
			<li>Groups</li>
			<li>Channels</li>
			<li>HD Videos</li>
			<li>Staff Picks</li>
			<li>Everywhere</li>
		</ul>
	</li>
	<li>Help
		<ul>
			<li>Help Center</li>
			<li>Vimeo Basics</li>
			<li>Community Guidelines</li>
			<li>Community Forums</li>
			<li>Developers</li>
		</ul>
	</li>
	<li><input type="search">
		<ul>
			<li>Search People</li>
			<li>Search Groups</li>
			<li>Search Channels</li>
			<li>Search Forums</li>
		</ul>
	</li>
</ul>

settings.json

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