2 sub-level click or tab me menu by GCyrillus (Griboval Cyrille) http://dabblet.com/gist/2906473

dabblet.css

/* 2 sub-level  click or tab me menu by GCyrillus (Griboval Cyrille) http://dabblet.com/gist/2906473 */
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-color:#EFEFEF;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;float:right;
}
#tabmenu p {position:relative;height:1.6em;}
#tabmenu p:after {content:'\25BC';position:absolute;right:5px;text-shadow:1px 1px 1px gray;}
#tabmenu 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;}
#tabmenu  :focus {font-variant:small-caps;text-shadow:0 0 1px #333, 0 0 5px gray;}
[tabindex] {cursor:pointer;}
 #tabmenu ul ul{left:150px;position:relative;
 top:-1.9em;
 width:150px;
 display:table;
 margin:0 0 0 -9999px;
 }
 #tabmenu ul ul a {margin-left:-9999px;}
 #tabmenu ul ul li a:focus  {
 margin-left:19998px;
}
#tabmenu ul ul li:first-child a {
border-radius:0 0.5em 0 0 ;
}
#tabmenu ul li a:focus.fermoir  + ul {
margin-left:10001px;
}
#tabmenu ul li .fermoir {
position:absolute;
z-index:1;
right:1px;
margin-top:1px;
border:0;
width:auto;
background:none;
box-shadow:none;
padding: 0 5px 0 20px;
text-indent:0;
line-height:1.4em;
}
.fermoir:before {display:none;}
#tabmenu ul li .fermoir:focus {color:white;}
 
 
 
 
 
 
 

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><a class="fermoir" tabindex="-1" href="#none">&#9658;</a>
   <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><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>
<p style="display:table;margin:2em auto;text-align:center;text-shadow:1px 1px 1px white;font-size:1.3em;">
Why no <code>:hover</code> here ? : this might be the best answer i can give <a href="http://dev.w3.org/csswg/css4-mediaqueries/#hover">CSS4 media queries (hover) </a>.<br/>
This means, you will be abble to filter CSS menu behavior from device capabilities.
</p>

settings.json

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