호버에서 "보이지 않는 경계선"을 없애는 방법

Question

오른쪽 테두리 만있는 탐색 모음을 만들려고합니다. 그러나 이렇게하면 호버에 보이지 않는 왼쪽 테두리가 생깁니다. 경계선을 내가 원하는 색으로 완전히 만드십시오.

이이 CSS있다 (왼쪽의 일부 대신에 라이트 블루의 청색)

#navbar{ 

    width:900px; 
    margin:0 auto; 
    background-color:#3f67c0; 
    height:60px; 


    } 
#navbar ul { 
    list-style-type: none; 
    text-align: left; 
    margin:0px; 
    padding:0px; 
    } 

#navbar ul li { 
    display: inline-block; 

    } 

#navbar ul li a { 
    display:block; 
    border-right:#FFF solid 1px; 
    border-left:none; 
    border-top:none; 
    boder-bottom:none; 
    padding: 20px 40px 20px 40px; 
    text-decoration: none; 
    color: #fff; 
    } 

#navbar ul li a:hover { 

    color: #FFF; 
    background-color: #35b5eb; 

    } 

는이이 HTML로 공간에 의해 발생

<div id="navbar"> 
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">CLAIM</a></li> 
<li><a href="#">PROOF</a></li> 
<li><a href="#">HELP</a></li> 
</ul> 
</div> 

Answer 1

되는 HTML이고 display: inline-block과 그 하위의 display: block의 조합으로 구성됩니다. 가장 좋은 방법은 공간이

<li><a href="#">HOME</a></li 
><li><a href="#">CLAIM</a></li>... 

당신은 대신 display: inline-block의 <li>에 float: left을 ul과 <li> 또는 <a>에 필요한 font-size에 font-size: 0를 사용하거나 사용할 수 있다고 말했다 제거하는 것입니다, 그러나 이들은 다른 유물이 발생할 수 있습니다 흥미로운

http://jsfiddle.net/ExplosionPIlls/zPjCS/