Белый зазор между фоном (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

Пожалуйста, добавьте перелива скрытый стиль уль тег

#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