A simple menu with a :hover action

dabblet.css

/**
 * A simple menu with a :hover action
 */
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;
	font: 100%/2.5 helvetica, arial;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: hsla(0, 100%, 0%, .4);
	overflow: hidden;
}

nav > ul > li {
	float: left;
}
nav a {
	display: block;
	padding: .2em 1em;
	border: solid hsla(0, 100%, 100%, .5);
	border-width: 0 1px 0 0;
	text-decoration: none;
	color: white;
	transition: .3s;
}
nav a:hover {
	background: hsla(0, 100%, 100%, .5);
	color: black;
}

li ul {
	position: absolute;
	opacity: 0;
	height: 0;
	transition: .3s;
}
li:hover ul {
	opacity: 1;
	height: auto;
}

dabblet.html

<nav>
	<ul>
		<li>
			<a href="http://www.smashingmagazine.com/" target="_blank">Home</a>
			<ul>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Smashing Magazine</a></li>
				<li><a href="http://vasilis.nl/" target="_blank">Vasilis van Gemert</a></li>
			</ul>
		</li>
		<li>
			<a href="http://www.smashingmagazine.com/" target="_blank">Old Habits</a>
			<ul>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Screen sizes</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Everybody has a mouse</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Broadband internet</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Faster computers</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Calibrated monitors</a></li>
			</ul>
		</li>
		<li>
			<a href="http://www.smashingmagazine.com/" target="_blank">New Defaults</a>
			<ul>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Activate</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Small screens</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Content</a></li>
				<li><a href="http://www.smashingmagazine.com/" target="_blank">Command line</a></li>
			</ul>
		</li>
	</ul>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}