バックグラウンド（a）とボーダー（ul）の白い隙間

Question

ホバーまたはアイテムをクリックすると、ナビゲーションバーが作成されます 選択したアイテムの背景色が変更されます。

最後に、コーナーを丸めたいと思っていました。それから私は、削除することができない白いスペースがあることを見た。

HTML

<nav id="nav"> 
     <ul> 
      <li><a href="#home">Home</a></li> 
      <li><a href="#lorem">Lorem</a></li> 
      <li><a href="#ipsum">Ipsum</a></li> 
      <li><a href="#dolor">Dolor</a></li> 
     </ul> 
    </nav> 

CSS

#nav 
{ 
    position: absolute; 
    top: 50px; 
    width: 100%; 
} 
    #nav > ul 
    { 
     padding: 0; 
     margin: auto; 
     width: 50%; 

     list-style: none; 
     display: flex; 

     border: 1px solid #673ab7; 
     border-radius: 20px; 
     background: #ffffff; 
    } 
     #nav ul > li 
     { 
      margin: 0; 
      width: 100%; 
      color: #673ab7; 

      line-height: 40px; 
     } 
      #nav ul > li > a 
      { 
       display: block; 
       color: inherit; 

       text-align: center; 
       text-decoration: none; 
       text-transform: uppercase; 
       letter-spacing: 2px; 

       transition: background 0.25s; 

       position: relative; 
      } 
       #nav ul > li > a:hover 
       { 
        background: #ede7f6; 
       } 
       #nav ul > li:first-child > a:hover 
       { 
        border-radius: 20px 0px 0px 20px; 
       } 



      #nav ul > li.active > a 
      { 
       border-radius: 20px 0px 0px 20px; 
       color: #FFFFFF; 
       background: #673ab7; 
      } 

JS

$(document).ready(function() 
{ 
    $("#nav > ul > li").click(function() 
    { 
    $("#nav > ul > li").each(function() 
    { 
     $(this).removeClass("active"); 
    }); 
    $(this).addClass("active"); 
    }); 
}); 

デモ：http://jsfiddle.net/sdaq97hh/31/

Answer 1

ULタグ

にオーバーフロー隠されたスタイルを追加してください。

#nav > ul { 
padding: 0; 
margin: auto; 
width: 80%; 
list-style: none; 
display: flex; 
border: 1px solid #673ab7; 
border-radius: 20px; 
background: #ffffff; 
overflow: hidden; 
} 

Answer 2

次のような最後のliを、ターゲットにできます。

#nav ul > li:last-child a { 
    border-radius: 0 20px 20px 0px; 
} 

JSFIDDLE