CSS By Gcyrillus find me on facebook or twitter

dabblet.css

/* CSS By Gcyrillus find me on facebook or twitter
Send me a message even if it is not 
to introduce yourself before requesting friendship :) 
have fun with this one ! */
body {
background:#333;
}

div {width:185px;
background:hsl(20, 13%, 28%);
color:white;
font-family:arial;
margin:2em;
max-height:33px;
overflow:hidden;
border-bottom :1px solid hsl(28, 15%, 53%);
transition:2s;
}
div:hover, div:focus, div:active {
max-height:400px;
transition:2s;
}
div h2 {

font-size:14px;
font-variant:small-caps;
border:1px solid hsl(28, 15%, 53%);
padding:0 5px;
background-image: -moz-linear-gradient(90deg,#433935,#524640);
position:relative;
line-height:32px;
margin:0;
}
div h2:before {
content:'';
background: url(http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/images/5.png) -5px -10px no-repeat;
height:20px;width:25px;
display:inline-block;
vertical-align:middle;

}
div h2:after {
content:'';
position:absolute;
height:19px;
width:19px;
right:7px;
top:6px;
background: url(http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/images/5.png) -158px -8px no-repeat;
}

div ul {list-style-type:none;
margin:0;
padding:0;
line-height:34px;
font-size:0.8em;
text-transform:capitalize;
}
ul li a {
display:block;
text-indent:1em;
background:#362F2D;
border:1px solid hsl(28, 15%, 53%);
border-width: 0 1px 0 1px ;
text-decoration:none;
color:white;
width:183px;
}
ul li:nth-child(even) a {
background:#493E3B
}
ul li:last-child {

}

dabblet.html

<div tabindex="0">
<h2>NAVIGATE</h2>
<ul>
<li><a href="#">About about</a></li>
<li><a href="#">About closer</a></li>
<li><a href="#">about here</a></li>
<li><a href="#">right there</a></li>
<li><a href="#">but Me down !</a></li>
</ul></div>

settings.json

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