menu

dabblet.css

/* menu */
ul ul {position:absolute;max-height:0;
overflow:hidden;
left:2px;
display:inline-block;
width:300px;
margin:0;
transition:max-height 0.5s;
box-shadow: 0 0 5px;
text-align:center;
border-radius:0 0 5px 5px;
background:white;
padding:0;
}
ul ul li {display:inline-block;margin:0 2px ;width:90px;
padding:0;text-align:left;
border-bottom:ridge #999 2px;}
ul ul li a {display:inline;border:none;}
body > ul {
display:table;
margin:auto;
background:#333;
background-image:linear-gradient(90deg, #333, #777);
border-radius:5px;
position:relative;
}
body >ul > li {display:inline-block;
width:100px;
margin:5px 15px 0 0;
vertical-align:top;
line-height:30px;
position:relative;
z-index:1;
}
a {
border-left:ridge #000 2px;
color:#999;
text-shadow:0 0 1px #eee;
padding:0 0.5em;
display:block;
text-align:center;
font-family:geaogia;
text-transform:uppercase;
text-decoration:none;
border-radius:5px 5px 0 0;
position:relative;
z-index:1
}
a:hover {background:white;}
li:hover ul {left:2px;max-height:600px;padding-bottom:0.5em;
transition:max-height 2s;}
li:nth-last-child(-n+2)  ul {right:0px;left:auto;}
body > ul:before {
content:'';
position:absolute;
height:10px;
width:15px;
background:white;
left:10px;
bottom:9px;
box-shadow:inset 15px 0px 0 -10px white,
inset -15px 0px 0 -10px white,
inset 0px -16px 0px -10px black,
0 0 1px #fff;
}
body > ul:after {
content:'';
position:absolute;
border:groove 7px ;
transform:rotate(45deg);
left:10px;
top:10px;
background:transparent;
border-color:white transparent transparent white;
box-shadow:0 0 1px #fff;
}

dabblet.html

<ul>
	<li><a href="#" title="lien de démo">lien</a>
	<ul>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
</ul>
	</li>
	<li><a href="#" title="lien de démo">lien</a>
	<ul>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
</ul>
	</li>
		<li><a href="#" title="lien de démo">lien</a>
	<ul>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
</ul>
	</li>
		<li><a href="#" title="lien de démo">lien</a>
	<ul>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
</ul>
	</li>
		<li><a href="#" title="lien de démo">lien</a>
	<ul>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
		<li><a href="#" title="lien de démo">lien</a></li>
</ul>
	</li>
</ul>

settings.json

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