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;
position:relative;
}
div:hover ul li a , div:focus ul li a, div:active ul li a , div ul li a:focus {
margin-left:9999px;
}
div h2 {
font-size:14px;
font-variant:small-caps;
border:1px solid hsl(28, 15%, 53%);
padding:0 5px;
background-image: 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;
position:absolute;
left:-9999px;

}
div ul li {		

}
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;
float:right;
clear:right;
}
ul li:nth-child(even) a {
background:#493E3B
}
ul li:last-child a {
border-bottom :1px solid hsl(28, 15%, 53%);
}
.fermoir {display:none;transition:0;cursor:pointer}
div:focus .fermoir {
position:absolute;
top:0;
left:0;
right:0;
height:34px;
margin:0;
transition:0;
background:rgba(0,0,0,0.1);
display:block;
z-index:1;
}
p {color:white;text-shadow:0 0 1px white,0 0 15px yellow;font-size:1.5em;}
a {color:#76A735}

dabblet.html

<div tabindex="0">
<h2>NAVIGATE</h2>
<a  href="#" class="fermoir" title="" tabindex="-1"></a>
<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>

<p>This is a CSS <code>:focus</code> alternative to this menu : <a href="http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/fichiers/example.html">menu déroulant animé avec jQuery</a>.<p>
<p>No accordeon effects, but you can tab throug it or click it.</p>
<h1>How does it work</h1>
<p>It is using the :focus state and  :hover is to feed the mouse.</p>
<p><code>tabindex</code> is added to the the box holding the menu and to the links.</p>
<p><code>ul</code>, is sent far away to the left side of the screen and formated with <code>display:table;</code>.</p>
<p>The links are dressed with style, floatting right.</p>
<h2>the focus action</h2>
<p>when the box holding the menu gets the focus, it brings ul back, so we see it </p>
<p>When a link has the focus, its margin-left turns to be as big as <code>ul</code> is far. 
and here they are,  floatting under your eyes.</p>
<p>An extra empty link is use to catch :focus on click to close.</p>

settings.json

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