Edit in JSFiddle


              
<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>
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;
      }
    }
  }
}