Vertical 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

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

#nav ul {
width: 165px;
}

This just sets the width to 165px.

#nav li {
list-style:none;
}

This removes the bullet points.

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

#nav ul li a{
color:#FFFFFF;
background-color: #336699;
padding:6px 12px 6px 12px;
display:block;
}

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.

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:#6699CC;
}

This will change the background colour to a light blue.