호버 이펙트 이동 텍스트

Question

내 웹 사이트에 마우스를 올리면 어떤 텍스트가 강조 표시 될 때 텍스트가 움직이는 것처럼 보입니다.

다음은 예이다 : 누군가가 나를 호버 효과를 강조 할 때 그렇게 텍스트가 남아 있도록 도와 수 있는지 궁금

http://gyazo.com/165d4f93909770c14387e574420a3db8

.

/*TOP NAV BAR SECTION*/ 
#nav_bar { 
    background-color: #a22b2f; 
    padding:1px; 
    box-shadow: 0px 2px 10px; 
    height:45px; 
    }   
#nav_bar ul li { 
    display: inline-block; 
} 
#nav_bar ul li a { 
    color: white; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:15px; 
} 
#nav_bar ul li ul { 
    display: none; 
} 
#nav_bar>ul>li>a:hover { 
    background:#8c1b1f; 
    padding-bottom:13px; 
    padding-top:17px; 
    padding-left:10px; 
    padding-right:10px; 
} 
#nav_bar>ul>li>ul>li>a:hover { 
    background:#c9c9c9; 
    padding-bottom:5px; 
    padding-top:5px; 
    padding-left:5px; 
    padding-right:5px; 

} 
#nav_bar ul li:hover ul { 
    display: block; 
    position: absolute; 
    padding: 0px; 
    background: #e2e2e2; 
    padding-top:10px; 
    padding-bottom:10px; 
    padding-left:0px; 
    padding-right:10px; 
    border: 1px solid black; 
    border-radius:5px; 
    }#nav_bar ul li:hover ul li { 
    display: block;`enter code here` 
} 
#nav_bar ul li:hover ul li a { 
    color: black; 
    font-size:14px; 
    font-weight:normal; 
    margin-left:-15px; 

그리고 탐색 막대의 HTML : 여기

이 (가) 탐색 바의 CSS 당신이 마우스를 가져 가면 당신은 패딩을 추가하는

<!--TOP NAV BAR SECTION--> 
      <div id="nav_bar"> 
       <ul> 
        <li><a href="index.html">HOME</a> 
        </li> 
        <li><a href="status.html">STATUS</a> 
        </li> 
        <li><a href="info.html">INFO</a> 
        </li> 
        <li><a href="#">GAMEMODES</a> 

         <ul> 
          <li><a href="survival.html">SURVIVAL</a> 
          </li> 
          <li><br><a href="pure-pvp.html">PURE-PVP</a> 
          </li> 
          <li><br><a href="gamesworld.html">GAMESWORLD</a> 
          </li> 
         </ul> 
        </li> 
        <li><a href="rules.html">RULES</a> 

        </li> 
        <li><a href="vote.html">VOTE</a> 

        </li> 
        <li><a href="contact.html">CONTACT</a> 

        </li> 
       </ul> 
      </div> 

Answer 1

,이 요소가 더 큰 것 내부 요소가 여전히 같은 크기 인 경우

#nav_bar ul li a { 
    color: white; 
    padding-bottom:13px; 
    padding-top:17px; 
    padding-left:10px; 
    padding-right:10px; 
    text-decoration:none; 
    font-weight:bold; 
    font-size:15px; 
} 

처럼 unhovered 요소에 패딩을 이동하는 것은 여기에 바이올린 http://jsfiddle.net/y803q0nr/