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/