Css how to create navigation bar - html

Question

I'am trying to make this in css. Trying to make this navigation bar. Any help would be great.
This is what iam trying to do:
So the first pic is how it should look like when the user enter the website. Then if they hover over the any of the tabs it should just change color. Any help on trying to make this would be great. I tried this but wont work.
HTML:
<div class="horizontal">
<ul>
<li>Home</li>
<li>Register</li>
<li>Rules</li>
</ul>
</div>
Just need to see what the css would look like. Thanks again
EDIT what i have done as people want 2 see:
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
{
display: inline-block;
margin-left: 5px;
}
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;
}
Like i said this is not right but this is all i can do atm. Thanks

Answer 1

Using your HTML, you can do something like this:
CSS
ul{
list-style:none;
}
li{
float:left;
width:100px;
height:50px;
background:black;
border:2px solid gray;
text-align:center;
}
a{
color:white;
text-decoration:none;
font-size:24px;
font-weight:bold;
line-height:50px;
font-style:italic
}
li:hover{
background:gray;
}
JSFiddle.
Just change the colors.