배경 (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