Tip: Check Your works at least on three most popular browsers.

This tutorial will show You how to code website menu using unordered lists, and valid xHTML/CSS. No JavaScript was used!

First we have to get nice graphic for this menu. I'll use this set:

1

2

3 

4

5 

You can make, and slice it Yourself by going through my two other tutorials

1. Nice, clean vertical menu.
2. Slice Your web graphic properly.

Our goal will be:


First we have to take care of the xHTML skeleton for our menu

Explanation

First seven lines are only doctype and headers. Only inportant thing is
<link href="style.css" rel="stylesheet" type="text/css" />
which is CSS stylesheet link (We will make it soon)

<div id="menu">...</div> - this div contains all menu structure (we will use it for top image part too)

<div id="menubody">...</div> - this div contains menu body, and unordered list (we use it for center repeated part - image no.2, and as InternetExplorer 6 fix)

<ul id="menulist">...</ul> - this is menu structure - unordered list.

<li><a href="#">Position 1</a></li> - this is one menu position (anhor inside list) - href="#" can be replaced by URL

<div id="menubottom"></div> - this gif contains bottom image part.

You can save this file for example as menu.html

Now it's time for most important CSS part:

You can save it as style.css

Explanation

* {margin:0; padding:0;} - this is global reset. It sets margins and paddings to 0. I use it almost in any project.

div#menu - nothing special here. Just width declaration, and background image (top one - number 1). Padding was set to 44px (that is the height of top image)

div#menubody - again, only background was set (with repeat-y) , and padding left (we place ul in right position)

div#menubottom - again, background and height - nothing special

ul#menulist - we use list-style-type:none to hide "bullets"

ul#menulist li  - here the magic starts. We set height for li elements, and background image which is placed bottom (it's this small 1px to 2px rectangle) and repeat-x - it is our separator line

ul#menulist a - we set width and height of a element, than set border-left to 10px with right color. Then font color and type and paddings for right placement. Last thing is: display:block !important; display:inline-block; . Because  of InternetExplorer, we have to use two declarations. First is for firefox, opera and other browsers they use it because !important value, and last is for IE which is ignoring !important. Both does almost this same thing.

ul#menulist a:hover - this is for hover effect (rollover). We use 1px strip repeat-y.

And that's all. You can check final result here