There are many ways that you can create menus for your website. The way I used to do it was by using tables and having a menu item for every menu item. This way I had come to find out is the hard way. Let’s talk about the easy way.

You can download the example code along with the images here.

Goal: Create a simple CSS menu.

Here is a screenshot of the CSS menu that we use on our company site:

Step 1. Download the images

	Background Image This image will be used as the background of the menu.
	Active Background Image Yes, it’s different than the first. Just slightly, however.

Step 2. Create the HTML

This code also includes HTML for layout. Lines 11-18 show the code for the menu.

Step 3. Create the CSS

But hold on, there’s even a better way to do this besides going through my steps above. There are two websites that help generate this code automatically:

http://www.cssmenumaker.com and http://www.13styles.com

These sites generate the code for you, and also have different templates that you can choose from.

So now you know how to do it, but do what I do.. use the generators :-D

Click here to download the example code.