CSS navigation bar

Question

I am playing around with CSS and so far I'am trying to make a website. I making a navigation bar and it's going down so it's horizontal. I need it to go across and I also need like 1 grey line to separate the tabs out. This is what I got so far.

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;
}

So again this goes downwards , i need it to go to the side and just have like a single line which separate every tab out.

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;
}

Working fiddle:

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