click or tab me menu by GCyrillus http://dabblet.com/gist/2903285

dabblet.css

/* click or tab me menu by GCyrillus http://dabblet.com/gist/2903285 */
html {height:100%;margin:0;padding:0;}
body {margin:0;padding:0;
background-image:radial-gradient(50% 80%, hsla(204, 67%, 61%, 0.7),  #444),linear-gradient(-90deg,#000,#09a) ;


}
#tabmenu {font-family:arial;font-size:16px;line-height:1.8em;background:#333;
display:table;
padding:0;margin:1em auto;
border-spacing:0;padding:0.5em;
border-radius:0.5em;border:1px solid #777;box-shadow:0 0 3px #999;
}
#tabmenu li  p  {border-radius: 0.5em 0.5em 0  0 ; }
#tabmenu li ul li:last-child a {border-radius: 0  0 0.5em 0.5em ;}
#tabmenu ul {display:table;margin:0;padding:0;position:absolute;
left:-9999px;}
#tabmenu  > li {
display:inline-block;
width:150px;
vertical-align:top;
position:relative;
}
#tabmenu ul li {
float:right;
list-style-type:none;
clear:right;
height:1.6em;
}
#tabmenu li a , #tabmenu p {border:solid 1px #333	;background-image:linear-gradient(90deg,#aaa,#eee);
display:block;
width:150px;
text-indent:1em;
margin:0;
outline:0;
text-decoration:none;
color:#333;
}
#tabmenu li a  {
box-shadow: 0px 3px 10px  -5px black;
}
#tabmenu p {position:relative;height:1.6em;}
p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
p:focus:after {content:'';}
#tabmenu p a {display:inline;position:absolute;border:0;left:-9999px;background:transparent;
color:#E68F28;text-shadow:0 0 1px black,0 0 2px white;text-decoration:none;text-align:right;width:auto;
padding-right:5px;
}
#tabmenu p:focus a {top:0;left:0;right:0;bottom:0;}
#tabmenu ul a:focus , #tabmenu p:focus + ul li a {
margin-left:9999px;
}
#tabmenu a:focus:before {content:'\25BA';margin-left:-1em;color:#E9CF5F;}
:focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}

dabblet.html

<ul id="tabmenu">
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
<li><p tabindex="0" > serie liens <a href="#" tabindex="-1" title="" class="fermoir">&#9650;</a></p>
  <ul>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
   <li><a href="#" tabindex="0" >lien</a></li>
  </ul>
</li>
</ul>

settings.json

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