Horizontal Navigation Bar with Rollover

Firstly we will deal with sorting out our links.

<div id="nav">
  <ul>
    <li><a href="http://skeletorscorpse.com/joomla/#">Home</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">News</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">About</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">Services</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">Links</a></li>
    <li><a href="http://skeletorscorpse.com/joomla/#">Contact</a></li>
  </ul>
</div>

You do not have to use a div, you can also use it within a table cell.

This just sets out your links using bullet points like this:

• Home
• News
• About
• Services
• Links
• Contact

The first bit of CSS code we will do is to apply a border around the whole div/td:

#nav{
  border:1px solid #FFFFFF;
}

I am using an ID (note the #), you could also use a class (which would use a . instead) if you are using multiple duplicated navigation bar use the class so you won't have any problems with W3C validation.

Now we will apply some CSS to format the layout to our ul tag:

#nav ul{
  width:100%;
  background-color:#6699cc;
  padding-left:0;
  margin:0;
  float:left;
}

This keeps the navigation bar to the left with the float tag. It also stretches the whole page/table cell. The margins and padding allow the lists to lose their default formatting.

Now we need to format each li tag.

#nav ul li{
  display:inline;
}

This will make all the items in the li tags lined up next to each other rather than on seperate lines.

Now we need to apply some CSS for our links within the li tags:

#nav ul li a{
  float:left;
  color:#FFFFFF;
  padding:6px 12px 6px 12px;
  border-right:1px solid #FFFFFF;
}

This applies padding to each link to make it look more like a button rather than a short link. With the padding, the first figure is the top padding, followed by the right padding, followed by the bottom then the left padding. The border-right seperates each link with a small border which uses the full height of the navigation bar which makes the links look more like buttons.

You can also add in other text formatting or you can use the formatting of the main links on the page.

To add a rollover we just need to add this small bit of CSS:

#nav ul li a:hover{
  background-color:#336699;
}

This will change the background colour to a dark blue.