텍스트를 수평이 아닌 센터/탐색 표시 줄 텍스트

Question

여기 사이에 너무 많은 공간을 내 웹 사이트를 : http://gyazo.com/56e069ebf8b5bd61ee30523886180b88 순자산 줄에 문제의 숫자가 있습니다

.

1.You는

2.There 텍스트 사이에 많은 공간이다 (위쪽과 아래쪽에서 동일한) 호버로 표시된 바와 같이 텍스트 또는 탐색 바가 수평 중심에 있지 않은 것을 알 수있다 (그리고이 간격은 텍스트를 강조하거나 떠오르게 할 때 주위를 돌아 다니지 않고도 발견 된 유일한 방법입니다.

그래서 1. 텍스트 또는 탐색 바를 만들 수있는 방법은 무엇입니까? 원인) 센터는 호버가 더 동등하게 보입니다. (가로 방향)

2. 텍스트 사이의 간격을 좁힐 수있는 방법이 있습니까? e는 동일한 패딩 설정이므로 hover 기능을 사용하면 텍스트가 움직이지 않습니다. 그 도움이된다면

나는 또한 jsfiddle을 추가했습니다 : NAV 바의 http://jsfiddle.net/d1a5eshs/

HTML을

<!--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 

이 여러 간격 문제 있었다도

/*TOP NAV BAR SECTION*/ 
#nav_bar { 
    background-color: #a22b2f; 
    padding:1px; 
    box-shadow: 0px 2px 
    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; 
    margin-left:10px; 
    padding-bottom:13px; 
    padding-top:17px; 
    padding-left:10px; 
    padding-right:10px; 
    margin-bottom:30px; 
} 
#nav_bar ul li ul { 
    display: none; 
} 
#nav_bar>ul>li>a:hover { 
    background:#8c1b1f; 
    padding-bottom:13px; 
    padding-top:13px; 
    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; 

} 
#nav_bar ul li:hover ul li a { 
    color: black; 
    font-size:12px; 
    font-weight:bol; 
    margin-left:-20px; 
    padding-bottom:5px; 
    padding-top:5px; 
    padding-left:5px; 
    padding-right:5px; 
} 

Answer 1

탐색 모음을위한 CSS duplicate styles 몇 가지 실수가 있었지만 모든 문제를 해결했다고 생각합니다. http://jsfiddle.net/d1a5eshs/1/.

Answer 2

내 탐색 바의 버전은 http://jsfiddle.net/zo541am2/입니다. HTML 코드와 CSS 코드를 다듬어 단순화했습니다.

HTML은 :

<nav> 
    <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><a href="pure-pvp.html">PURE-PVP</a></li> 
       <li><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> 
</nav> 

CSS는 :

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    padding: 10px; 
} 

nav { 
    background-color: #a22b2f; 
    box-shadow: 0px 2px 10px; 
} 

ul { 
    list-style-type: none; 
} 

nav > ul { 
    display: table; 
    margin: 0 auto; 
    min-width: 650px; 
    text-align: center; 
} 

nav > ul > li { 
    display: inline-block; 
    position: relative; 
} 

nav > ul > li > a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    font: bold 15px/3 Serif; 
    padding: 0 15px; 
} 
nav ul ul { 
    display: none; 
    position: absolute; 
    min-width: 100%; 
    background: #e2e2e2; 
    border: 1px solid gray; 
    border-radius: 2px; 
} 

nav > ul > li:hover > a { 
    background: #8c1b1f; 
} 

nav ul ul li a { 
    display: block; 
    color: black; 
    font: bold 12px/3 Sans-Serif; 
    text-decoration: none; 
} 

nav ul ul > li:hover > a { 
    background: #c9c9c9; 
} 

nav > ul > li:hover > ul { 
    display: block; 
}