Menú de círculos expandible

dabblet.css

/* Menú de círculos expandible */

ul.circulos { 
position: relative;
width: 100%;
height: 120px;
margin: 20px auto;  
text-align: center;
list-style-type: none;  
font:  bold 14px arial; 
}  
ul.circulos li {  
display: inline;
margin: 0;
padding: 0;
}   
ul.circulos li a {
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;  
color: white;  
background: darkblue;  
width:100px;  
height:100px;  
-o-border-radius: 200px;
-moz-border-radius: 200px;  
-webkit-border-radius: 200px;  
-ms-border-radius: 200px;
border-radius: 200px;
-o-transition: all .8s ease-out;
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
-ms-transition: all .8s ease-out;
transition: all .8s ease-out;
}
ul.circulos li:last-of-type a {
opacity: 1;
} 
ul.circulos a span {  
position: relative;
top:40%;
padding: 5px;
text-align: center;
}  
ul.circulos:hover li a {
color: black;
background: lightblue;
opacity: 1;
-o-transition: all .8s ease-out;
-webkit-transition: all .8s ease-out;
-moz-transition: all .8s ease-out;
-ms-transition: all .8s ease-out;
transition: all .8s ease-out;
}  
ul.circulos:hover li:nth-of-type(1) a {
margin-left: -250px;
}
ul.circulos:hover li:nth-of-type(2) a {
margin-left: -150px;
}
ul.circulos:hover li:nth-of-type(3) a {
margin-left: -50px;
}
ul.circulos:hover li:nth-of-type(4) a {
margin-left: 50px;
}
ul.circulos:hover li:nth-of-type(5) a {
margin-left: 150px;
}
ul.circulos:hover li:last-of-type a {
opacity: 0;
top: -1000px;
} 

dabblet.html

<!-- HTML -->

<ul class="circulos">
<li><a href="javascript:void;"><span>Inicio</span></a></li>
<li><a href="javascript:void;"><span>Portfolio</span></a></li>
<li><a href="javascript:void;"><span>Bio</span></a></li>
<li><a href="javascript:void;"><span>Galería</span></a></li>
<li><a href="javascript:void;"><span>Contacto</span></a></li>
<li><a href="javascript:void;"><span>MENU</span></a></li>
</ul>

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}