border-bottom 전체 div 삭제

Question

좋아, 문제는 이것입니다. li 위에 마우스를 올리면 내 전체 div가 조금 떨어지고 다시 돌아 오면 끝납니다. 임 그냥 그냥 아래로 조금

<div id="header_left"> 
       <ul> 
        <li><a class="active" href="#home">Home</a></li> 
        <li><a href="#news">News</a></li> 
        <li><a href="#contact">Contact</a></li> 
        <li><a href="#about">About</a></li> 
       </ul> 
      </div> 

과 CSS를 구성 전체 사업부를 포기하지 않고 경계 바닥 표시됩니다 있도록 설정하려고

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
} 

li a { 
    display: inline-block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    border-bottom: 2px solid green; 
} 

Answer 1

그냥 없음으로 투명한 테두리를 추가입니다 너의 성분의 선회 한 국가. 이 같은

:이 호버에 울퉁불퉁 제거하는 데 도움이됩니다

li a { 
border-bottom: 2px solid transparent; 
} 

.

Answer 2

하단에 테두리를 표시하도록 개별 메뉴 항목을 가져 오려고하는 경우 각 메뉴 항목의 ID를 설정하고 css on Hover에서 수행 할 작업을 지정할 수 있습니다. 그것이 옳은 것처럼 당신은 모든 것을 목표물로 삼고 있기 때문에 모든 것이 호버 위에 떨어집니다. 그것의 쉬운 수정, 그냥 몇 줄의 코드가 필요합니다.

Answer 3

1. 항상 "박스 크기 조정 : 경계 상자는"추가 박스 모델
2. 설정 기본 투명 경계 내부 테두리와 패딩을 포함 호버

* { 
 
    box-sizing: border-box; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    border-bottom: 2px solid transparent; 
 
} 
 

 
li a:hover { 
 
    border-color: green; 
 
}

<div id="header_left"> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a></li> 
 
     <li><a href="#news">News</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
     <li><a href="#about">About</a></li> 
 
    </ul> 
 
</div>

에만 색상을 변경