Menu CSS3

dabblet.css

/**
 * Menu CSS3
 */
nav{
	display:block;
	text-align:center;
}
nav ul{
	list-style:none;
	margin:0;padding:0;
	background:rgba(0,0,0,0.2);
}
nav>ul{
	font-size:0;
	display:inline-block;
}

nav>ul>li{
	display:inline-block;
	*display:block;
	vertical-align:top;
	font-size:17px;
	position:relative;
}

nav a{
	cursor:pointer;
	display:block;
	padding:5px 10px;
	background:#49c;
	margin:10px;
	
}

nav>ul>li>ul{
	opacity:0;
	visibility:hidden;
	transform:scaleY(0.1);
	transform-origin:0 0;
	position:absolute;
	left:50%;
	right:50%;
	z-index:0;
	margin:10px -100px;
	transition:	opacity 0.7s ease-out,	transform 0.7s cubic-bezier(0.5,0,0.5,0),visibility 0.7s;
}

a+ul>li{
	opacity:0;
	transition:opacity 0.5s ;
}

nav>ul>li:hover>ul{
	opacity:1;
	visibility:visible;
	transform:scaleY(1);
	z-index:1;
	transition:	opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.5,2,0.5,1),visibility 0.7s;
}



nav>ul>li:hover>ul>li{
	opacity:1;
	transition:opacity 0.3s 0.1s ;
}

dabblet.html

<nav>
	<ul>
		<li>
			<a>Cordes</a>
			<ul>
				<li><a>Violon</a></li>
				<li><a>Guitare</a></li>
				<li><a>Contrebasse</a></li>
				<li><a>Piano</a></li>
			</ul>
		</li>
		<li>
			<a>Vents</a>
			<ul>
				<li><a>Trompette</a></li>
				<li><a>Saxophone</a></li>
				<li><a>Clarinette</a></li>
				<li><a>Hélicon</a></li>
				<li><a>Flûte à bec</a></li>
				<li><a>Flûte de pan</a></li>
				<li><a>Flûte traversière</a></li>
				<li><a>Mirliton</a></li>				
				<li><a>Hautbois</a></li>
			</ul>
		</li>
		<li>
			<a>Percutions</a>
			<ul>
				<li><a>Batterie</a></li>
			</ul>
		</li>
	</ul>
</nav>

settings.json

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