Weißer Abstand zwischen Hintergrund (a) und Rahmen (ul)

Question

Ich baue eine Navigationsleiste, Wenn Sie den Mauszeiger über den Hintergrund bewegen, wird die Farbe des ausgewählten Objekts geändert.

Am Ende wollte ich die Ecken abrunden. Dann sah ich, dass es einen weißen Raum gibt, den ich nicht entfernen kann.

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

Demo: http://jsfiddle.net/sdaq97hh/31/

Answer 1

Bitte fügen Überlauf versteckt Stil in ul-Tag

#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

Sie können die letzte li, wie dieses Ziel:

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

JSFIDDLE