Make a list menu with rollovers using pure CSS

For the actual HTML code we need to set out the links for the navigation bar:

<a href="http://skeletorscorpse.com/joomla/#">Link1</a><br>
<a href="http://skeletorscorpse.com/joomla/#">Link2</a><br>
<a href="http://skeletorscorpse.com/joomla/#">Link3</a><br>
<a href="http://skeletorscorpse.com/joomla/#">Link4</a><br>
<a href="http://skeletorscorpse.com/joomla/#">Link5</a><br>

This displays simple text links with no formatting like this:

Link1
Link2
Link3
Link4
Link5

Now we need to put in the code so that we have a proper menu.

For this we use a DIV tag to define the general CSS for the whole menu, and LI (List) tags for the individual formatting.

<div class="vertnav">
<ul>
<li><a href="http://skeletorscorpse.com/joomla/#">Link1</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">Link2</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">Link3</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">Link4</a></li>
<li><a href="http://skeletorscorpse.com/joomla/#">Link5</a></li>
</ul>
</div>

This displays simple text links with no formatting like this:

Now for the CSS code:

.vertnav {
padding: 0px;
margin: 0px;
width: 150px;
}

The padding and margin make sure that the formatting stays the same and the width is optional. If the Menu is going within a table cell the width tag is not needed.

The UL tag adds padding and a bullet point on each line as you can see in the example above. To remove this we need to define some CSS just for the UL tag under the DIV tag.

.vertnav ul {
padding: 0px;
margin: 0px;
list-style: none;
text-align: center;
}

The list-style: none; removes the bullet points, if you want the bullet points to stay, just remove this line.

Then we need to set out the LI tag so that the links appear right above each other:

.vertnav li {
border-top: 2px solid #E6E6E6;
}

This sets a border 2px big and fills it with #E6E6E6 rather than leaving a large gap, this has the same effect as a spacer would in a table.

Now we need to add the formatting to the actual links.

.vertnav a {
display: block;
background-colour: #F2F2F2;
color: #CCC;
text-decoration: none;
padding-left: 2px;
padding-right: 2px;
width: 100%;
border-left-style:solid;
border-left-color:#FFF;
border-left-width:3px;
border-right-style:solid;
border-right-color:#FFF;
border-right-width:3px;
}

The display: block; is so that the background colour takes up the whole of the "cell" rather than just covering the text.

The text-decoration; is so that the links won't be underlined.

The padding will keep the text 2px away from the left and right edges.

The border adds a border of 5px to both sides of the "cell".

Now we need to add the CSS for when the mouse hovers over the links.

.vertnav a:hover {
text-decoration: none;
color: #000;
border-left-style:solid;
border-left-color:#0000FF;
border-left-width:3px;
border-right-style:solid;
border-right-color:#0000FF;
border-right-width:3px;
}

As you can see you don't need all the code fromt the normal link as it will cover all the link states anyway.

From this code the left and right border change colour and the text changes colour too.