The standard way of creating a horizontal menu is to use the "ul" HTML element for structure and stylize it using CSS. The "ul" element is an "unordered list" containing with "li" list elements that are the menu.

In this tutorial, we will build this menu ...

See CSS horizontal menu in action »

1. First start out with an basic HTML file with menu items in an unordered list structure containing the three menu items "Home", "Books", and "Tutorials" as shown...

2. Depending on what browser you are using, it an un-styled list would look something like this ...

3. Different browsers may use different default margins and paddings for the ul and li elements. To make things consistent across different browsers, we will write CSS rules to zero out these margins and paddings.

For the sake of simplicity in this tutorial, we will embedded the CSS stylesheet into the head of the HTML page. But for live code, you would move this CSS to an external CSS file.

We attach an id attribute to ul list and apply the following CSS rules to zero out the ul list element and is child li elements...

4. In addition, we do not want the list item dots in our menu, so we add the following CSS rule ...

Now our page looks like this ...

5. But this is to be an horizontal menu. Right now the list is vertical. To make the list go horizontal, we have to float left each of the li menu items.

And we get ...

6. We give each menu a fixed width which will help space things apart. And we want the text centered along the li element. So we add two CSS rules ...

Sometimes it helps to add a red debugging border in order to see the boundaries of the li menu items.

We see the following ...

7. Let's add some padding to the top and bottom of menu text ...

and get ...

8. It looks good now, so we can remove the red debugging border. This menu is meant to be clickable. So instead of plain text in between the li's, we put wrap the around the menu text with an link elements ...

We now have clickable horizontal menus ...

The mouse cursor changes to the hand icon when you hover over the text.

9. Menus typically do not need underlines. So we'll eliminate the underline and make them appear only upon hover...

10. In addition, we can styles the menu text with CSS as usual by giving it a different font and color. We can even make the text change color upon hover.

Note that we added the "visited" pseudo-class to the CSS rule so that the style is applied to both the visited and non-visited links.

Our end result is the following ...

In the next tutorial, we will learn how to add a graphical hover effect to this horizontal CSS menu