CSS 네비게이션 바

Question

나는 CSS로 놀고 있으며 지금까지 웹 사이트를 만들려고 노력하고있다. 나는 네비게이션 바를 만들고 그것이 수평이되도록 내려갑니다. 나는 그것을 가로 질러 갈 필요가있다. 그리고 나는 또한 탭을 분리하기 위해 1 회색 선처럼 필요하다. 이것이 내가 지금까지 얻은 것입니다.

HTML :

<div class="horizontal"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="Register.html">Register</a></li> 
<li><a href="Rules.html">Rules</a></li> 
</ul> 
</div> 

CSS :

div.horizontal 
{ 
width:809px; 
height:63px; 
position:relative; 
top: -1046px; 
left: 104px; 
} 
div.horizontal ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
div.horizontal li 
{ 
float:left; 
} 
div.horizontal a 
{ 
display:block; 
width:809px; 
} 
div.horizontal a:link,div.horizontal a:visited 
{ 
font-weight:bold; 
color:#FFFFFF; 
background-color:#000000; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
div.horizontal a:hover,div.horizontal a:active 
{ 
background-color:#999999; 
} 

그래서 다시 아래쪽으로 간다, 내가 그것을 옆에 가서 그냥 모든 탭을 분리 한 줄처럼이 필요합니다.

Answer 1

div.horizontal 
{ 
width:809px; 
height:63px; 
position:relative; 
left: 104px; 
} 
div.horizontal ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
div.horizontal li 
{ 
display: inline-block; 
    margin-left:5px; 
} 
div.horizontal a 
{ 
display:block; 
width:809px; 
} 
div.horizontal a:link,div.horizontal a:visited 
{ 
font-weight:bold; 
display: inline; 
color:#FFFFFF; 
background-color:#000000; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
div.horizontal a:hover,div.horizontal a:active 
{ 
background-color:#999999; 
} 

근무 바이올린 : 상단 :

http://jsfiddle.net/EpPSv/10/