To make use of this tutorial, you must have some prior knowledge of common html markup and basic css rules.

Click here to see the final result

Set up links for the navigation bar

Step 1

This displays simple text links with no formatting in a vertical format.

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

Step 2

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


This displays simple text links with no formatting in a vertical format.

Now for the CSS code

Step 3

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.

Remove padding and bullet point

Step 4

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:


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.

Step 5

The display: block; is so that the background color 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.

Step 6

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 color and the text changes color too.

Choose Your Rating:
5 4 3 2 1

Name:


Email Address:


Web Site URL:


Title:


Comment: