Responsive Menu

dabblet.css

/**
* Responsive Menu 
*/


* {
	box-sizing: border-box;
	transition: all 0.5s ease;
	vertical-align: middle;
 }

ol {
	margin: 0;
	padding:0;
}

nav ol {
	list-style: none;
}

nav a {
	display: block;
	color: black;
	text-decoration: none;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
	padding: 5px;
	border-radius: 5px;
}

nav .current a {
	background-color: #AAA;
}

nav a:hover {
	color: white;
	background-color: black;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0.5px 0.5px 4px 1px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
}

nav li {
	height:0;
	overflow:hidden;
}

nav:hover li, nav li.current {
	height: 2em;
	overflow:visible;
}

nav .current a{
	position: relative;
	padding-right: 1.5em;
}

nav li.current a:after {
	content: '\25BC';
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 180%;
	padding:0;
	margin:0;
	color: rgba(0, 0, 0, 0.5);
 	text-shadow: 2px 2px 4px #000000; 
 	height:100%;

}

nav:hover li.current a:after {
	width:0;
	overflow: hidden;
	content: '';
}

@media only screen and (min-width: 500px) { 
	nav li, nav li.current {
		height: 2em;
		display: inline-block;
		overflow:visible;
	}
	
	nav li.current a {
		padding-right:5px;
	}

	nav li.current a:after {
		width:0;
		content: '';
		overflow: hidden;
	}
	
}

dabblet.html

<nav>
	<ol>
		<li>
			<a href="#">Home</a>
		</li>
		<li class="current">
			<a href="#">Blog</a>
		</li>
		<li>
			<a href="#">Pictures</a>
		</li>
		<li>
			<a href="#">Music</a>
		</li>
		<li>
			<a href="#">Video</a>
		</li>
		<li>
			<a href="#">Store</a>
		</li>
		<li>
			<a href="#">Contact</a>
		</li>

		<li>
			<a href="#">Other stuff</a>
		</li>
	</ol>
</nav>

settings.json

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