The HTML code for our CSS menu

Removing the bullets

First thing we'll do is remove the bullets, by creating a new CSS rule:

#nav-menu ul{list-style: none;padding: 0;margin: 0;}

The important CSS command is the first one, list-style: none, which says that we don't want any kind of bullet in our navigation menu. The others are also important to ensure maximum control over the layout and to make sure the text displays in the centre of the box.

Displaying the menu items inline

To get these menu items all on to one line we'll insert this CSS rule:

#nav-menu li{float: left;margin: 0 0.15em;}

The floatCSS command is the really important one here as that aligns the menu items up against each other. The marginCSS command gives each menu item no margin to the top or bottom and a 0.15em margin to the left and right.

Now we're getting there! One word of warning, by using float: left, whatever you place below yourCSS navigation menu will display alongside the menu and not below it. To get round this, be sure to assign clear: both to whatever's next in the HTML document.

Making the boxes

Right, we've got the menu items all lined up next to each other, so now let's make them look good too. Our final CSS rule is:

Bit long, eh? Let's go through it, bit-by-bit. The backgroundCSS command is perhaps the most important. In it, we specify the URL of the background image, for there to be a white background behind this image, for the image to be in the bottom-left of the box and for it to be repeated along the x-axis (i.e. horizontally). If we didn't specify the background image to be in the bottom of the box it would be placed in the top left corner. This would cause the white background colour to be visible below the background image, and not above like it is now.

We've specified the height to be double the size of the text at 2em. By specifying the height in terms of em, the height of the box will resize accordingly should a user resize the text on their browser. A line height equal to the height of the box must be specified too, as this is what positions the text in the middle of the box and not at the top.

IE 5 on Mac

You may have noticed the float: left in the above CSS rule. This is there solely for the benefit of IE5 on Mac - without it, our CSS navigation boxes will stack up on top of each other in this browser. We don't however want other browsers to use this rule, so we need to cancel it for every browser except IE 5 on Mac:

/* Hide from IE5-Mac \*/#nav-menu li a{float: none}/* End hide */

The CSS command here, float: none, will cancel out the float: leftCSS command because when two CSS commands are specified for the same selector, the second one always takes precedence. This will work for all browsers except IE 5 on Mac, which will be unable to read the second command because of the slashes and stars. (If you really want to know how and why this works, read Commented Backslash MacIE5 CSS Hack by Sam Foster.)

No wrapping please!

There's just one final CSS rule we need to create, and that's to assign a width to our CSS menu navigation. This is optional, but if we don't assign one then menu items on the right may be pushed below the others if users resize their screens. Our new CSS command is:

Take this further

Did you notice that when you mouseover the CSS navigation menu items above, they become underlined?You can specify any hover effect for these menu items, including changing the background image. Simply make a copy of the entire #nav-menu li aCSS rule and change #nav-menu li a to#nav-menu li a:hover. Within this new CSS command, make any changes you like - in this example we changed text-decoration: none to text-decoration: underline.

You could even make two more copies of this CSS rule, for #nav-menu li a:visited and #nav-menu li a:active. These rules would be applied to visited and active links respectively within theCSS navigation. You can then change whatever commands you like for these. Play around and see what you can come up with!