6. Menú acordeón vertical!!! Fuente
HTML

​<ul id="menu-accordeon">  
<li><a href="#">Lien menu 1</a>       
<ul>          
<li><a href="#">lien sous menu 1</a></li>         
<li><a href="#">lien sous menu 1</a></li>          
<li><a href="#">lien sous menu 1</a></li>         
<li><a href="#">lien sous menu 1</a></li>       
</ul>    </li>     
<li><a href="#">Lien menu 2</a>      
<ul>          
<li><a href="#">Lien sous menu 2</a></li>         
<li><a href="#">Lien sous menu 2</a></li>         
<li><a href="#">Lien sous menu 2</a></li>         
<li><a href="#">Lien sous menu 2</a></li>       
</ul>    </li>    <li><a href="#">Lien menu 3</a>      
<ul>          <li><a href="#">Lien sous menu 3</a></li> 
<li><a href="#">Lien sous menu 3</a></li>          
<li><a href="#">Lien sous menu 3</a></li>          
<li><a href="#">Lien sous menu 3</a></li>      
</ul>    </li> </ul>​

CSS (552- 593)

 #menu-accordeon {
  padding:0;   
    margin:0;  
    list-style:none;  
    text-align: center;   
    width: 180px; } 
#menu-accordeon ul {  
    padding:0;   margin:0;   
    list-style:none;   
    text-align: center; } 
#menu-accordeon li {    
    background-color:#729EBF;    
    background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);   
    background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);   
    border-radius: 6px;    
    margin-bottom:2px;    
    box-shadow: 3px 3px 3px #999;    
    border:solid 1px #333A40 } 
#menu-accordeon li li {    
    max-height:0;    overflow: hidden;    
    transition: all .5s;   
    border-radius:0;    
    background: #444;    
    box-shadow: none;   
    border:none;    
    margin:0 } 
#menu-accordeon a {   
    display:block;  
    text-decoration: none;   
    color: #fff;   padding: 8px 0;   
    font-family: verdana;   
    font-size:1.2em } 
#menu-accordeon ul li a, 
#menu-accordeon li:hover li a {   
    font-size:1em } 
#menu-accordeon li:hover {   
    background: #729EBF } 
#menu-accordeon li li:hover {    
    background: #999; }
#menu-accordeon ul li:last-child {    
    border-radius: 0 0 6px 6px;   
    border:none; } 
#menu-accordeon li:hover li {  
    max-height: 15em; }​

1.http://cssdeck.com/labs/ribbonmenu 2. http://cssdeck.com/labs/css3
3. http://cssdeck.com/labs/uhvocnp8
4. http://cssdeck.com/picks/128
5. http://cssdeck.com/labs/qyb5yqnz
6. http://cssdeck.com/picks/131
7. Piano menu
http://cssdeck.com/labs/pure-css3-vertical-piano
a. Texto
http://cssdeck.com/labs/pure-css3-piano
8.http://cssdeck.com/picks/166
9.http://cssdeck.com/picks/138
10.http://cssdeck.com/picks/167
11.http://cssdeck.com/labs/obnav
12.http://cssdeck.com/picks/177
13.http://cssdeck.com/labs/obligatory-css3-ui-nav
14.http://cssdeck.com/picks/184
15.http://cssdeck.com/labs/mobile-site-mockup
16.http://cssdeck.com/picks/196
17.http://cssdeck.com/labs/create-great-css3-menus-for-smartphones
18.http://cssdeck.com/labs/top-menu-slider
19.http://cssdeck.com/picks/213
20.http://cssdeck.com/picks/225
21.http://cssdeck.com/picks/245
22.http://cssdeck.com/picks/247
23.http://cssdeck.com/picks/249
24.http://cssdeck.com/picks/257
25.http://cssdeck.com/picks/281
26.http://cssdeck.com/picks/284
27.Menu y acordeón para texto
http://cssdeck.com/picks/188
28.http://cssdeck.com/labs/a-flash-blue-menu
29.http://cssdeck.com/picks/305
30. http://cssdeck.com/labs/isiatjul

Fuentes:
1. http://codepen.io/MorenoDiDomenico/pen/MYoMYQ
2.http://codepen.io/jennyveens/pen/GgEdpy
3.http://codepen.io/lbebber/pen/RNgBPP
4.http://codepen.io/lbebber/pen/rawQKR
5.http://codepen.io/mehmetmert/pen/MYmxXx
6.http://codepen.io/ilanf/pen/ramzxe
7.http://codepen.io/masumonline/pen/PwmPeR
8.http://codepen.io/SitePoint/pen/PwmjYp
9.http://codepen.io/HieuHuynh/pen/ogZNbY
10.http://bradsknutson.com/blog/simple-css-navigation-menu/
11.http://codepen.io/thecolonizemarseffort/pen/tefnB