Pure CSS menu demo

dabblet.css

/* Pure CSS menu demo */

body {
	font-family: "Trebuchet MS", sans-serif;
	font-size: 30px;
	line-height: 1.4
}
/* CSS 2 */
.menu-bar {
	background-color: #666;
	color: #eee;
	height: 1.4em;
	padding: 0.1em 0;
	overflow: visible;
}
.menu {
	width: 8em;
}
.menu label {
	background-color: #666;
	cursor: pointer;
	padding: 0 0.5em;
}
.menu-clicker {
	position: absolute;
	top: -1000px;
	left: -1000px;
	width: 0;
	height: 0;
	margin: 0;
	opacity: 0;
}
.container {
	max-height: 0;
	overflow: hidden;
	position: relative;
}
.options {
	background-color: #eee;
	border: solid 1px #666;
}
.options a {
	display: block;
	padding: 0.1em 0.5em;
	text-decoration: none;
}
.options a, .options a:visited {
	color: #666;
}
.options a:hover {
	background-color: #acd;
}
/* CSS 3 */
.menu-clicker:checked {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.menu-clicker:checked ~ .container {
	max-height: 9em;
	z-index: 2;
}
.container {
	-webkit-transition: all 400ms ease-out;
	   -moz-transition: all 400ms ease-out;
		-ms-transition: all 400ms ease-out;
		 -o-transition: all 400ms ease-out;
			transition: all 400ms ease-out;
	-webkit-box-shadow: 0.1em 0.1em 0.2em #999; 
	   -moz-box-shadow: 0.1em 0.1em 0.2em  #999; 
			box-shadow: 0.1em 0.1em 0.2em  #999;

dabblet.html

<p>Click the Ingredients menu!</p>
<div class="menu-bar">
	<div class="menu">
		<input class="menu-clicker" type="checkbox" id="menu-1">
		<label for="menu-1">Ingredients</label>
		<div class="container">
			<div class="options">
				<a href="http://dabblet.com/gist/2004521" target="_top">Bacon</a>
				<a href="http://dabblet.com/gist/2004521" target="_top">Lettuce</a>
				<a href="http://dabblet.com/gist/2004521" target="_top">Tomato</a>
				<a href="http://dabblet.com/gist/2004521" target="_top">Mayonnaise</a>
				<a href="http://dabblet.com/gist/2004521" target="_top">Bread</a>
			</div>
		</div>
	</div>
</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"","page":"all"}