Multi-level dropdown menus

dabblet.css

/**
 * Multi-level dropdown menus
 */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font: 100%/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.nav, .nav ul {
	list-style: none;
	letter-spacing: -.25em; /* Remove inline-block whitespace*/
}

	.nav li, .nav a {
		display: inline-block;
		*display: inline;
		zoom: 1;
		letter-spacing: 0; /* Restore normal letter spacing */
		white-space: nowrap;
	}

/* Abstraction over, now onto the dropdown styles */

.drop li {
	position: relative;
}

.drop a {
	padding: .75em 1em;
	background-color: #ddd;
}

	.drop li > ul {
		position: absolute;
		left: -9999px;
		top: 100%;
	}
	
		.drop li > ul li {
			display: block;
		}
	
		.drop li:hover > ul {
			left: 0;
		}
	
	.drop li > ul li > ul {
		top: 0;
	}
	
		.drop li > ul li:hover > ul {
			left: 100%;
		}

dabblet.html

<h1>Multi-level dropdown menus</h1>
<ul class="drop nav">
	<li><a href="#">Level one</a></li>
	<li>
		<a href="#">Level one</a>
		<ul>
			<li><a href="#">Level two</a></li>
			<li>
				<a href="#">Level two</a>
				<ul>
					<li><a href="#">Level three</a></li>
					<li><a href="#">Level three</a></li>					
					<li>
						<a href="#">Level three</a>
						<ul>
							<li><a href="#">Level four</a></li>
							<li><a href="#">Level four</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Level one</a></li>
</ul>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}