title: Css how to create navigation bar
body: <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/XB4Jw.png" alt="enter image description here"></p>
  
  <p>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. </p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="horizontal"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Register.html"&gt;Register&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Rules.html"&gt;Rules&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just need to see what the css would look like. Thanks again </p>
  
  <p>EDIT what i have done as people want 2 see: </p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Like i said this is not right but this is all i can do atm. Thanks </p>