Basic menu with sub-menu css

dabblet.css

/* Basic menu with sub-menu css */

.menu-main li {
	list-style: none;
}
.menu-main > li {
	display: 		inline-block;
	vertical-align: top;
	position: 		relative;
}

.sub-menu {
	display: 	none;
	position: 	absolute;
	top: 		100%;
	left: 		0;
	padding: 	0;
}

.menu-main > li:hover .sub-menu {
	display: 	block;
}

dabblet.html

<ul class="menu-main">
	<li><a href="#0">Home</a></li>
	<li><a href="#0">About</a></li>
	<li><a href="#0">Services</a>
		<ul class="sub-menu">
			<li><a href="#0">Graphic Design</a></li>
			<li><a href="#0">Web Development</a></li>
			<li><a href="#0">Web Hosting</a></li>
		</ul>
	</li>
	<li><a href="#0">Contact</a></li>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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