Cita:
Iniciado por ArturoGallegos 
Me ha parecido un efecto interesante, así que lo he intentado hacer y el resultado fue este, espero que te sirva.
Ignora la pestaña de javascript, aun no descubro como ocultarlas cuando no se utilizan.
wow amigo muchas gracias por tu ejemplo veo que funciona de maravilla pero mira lo implemente así en mi web
Código PHP:
<style>
nav{
width: 80%;
margin: 30px auto;
ul{
list-style:none;
margin: 0;
padding: 0;
position: relative;
overflow:hidden;
&:before{
content: '';
display: block;
width: 100px;
height: 250px;
background: #fff;
position: absolute;
top: 0;
left: 0;
border-radius:0 0 100% 0;
}
li{
font: 14px/33px arial,verdana,tahoma;
background: #036;
padding: 0 0 0 120px;
box-sizing:border-box;
margin-bottom: 10px;
a{
color: #fff;
text-decoration: none;
}
}
}
}
</style>
<nav>
<ul>
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
<li><a href="">item 4</a></li>
<li><a href="">item 5</a></li>
</ul>
</nav>
pese a ello se ve así
