Creating a Navigation Menu using an Unordered List and CSS

By far the easiest, cleanest, most lightweight and most flexible way to create a horizontal navigation menu is to use an unordered list and style it with CSS. I’m going to show you, starting with a standard list, how to create a fully functional menu including formatting and functionality.

If so we’re making good progress. It’s now horizontal and a navigation menu in it’s most primitive form. So what did we do above?

list-style-type:none
The ‘list-style-type’ attribute allows you to set the type of list to use. By default it uses the black, round bullet but this can be changed to use a square or a white circle. In this case we set it to ‘none’ so that we get a plain list with no symbols.

margin:0 and padding:0
Unordered lists by default include some kind of spacing around them. By setting the margin and padding to zero pixels we remove this unwanted space. Don’t worry, we will add any required spacing back in in a bit later on.

float:left
This is the style that turns our vertical list into a horizontal one. In doing this we are telling each individual list item to kind of hover next to it’s predecessor which in turn places them one after the other on a single line.

Now we have a simple menu in place, lets move onto making it look pretty and add some formatting. I want to add a background color, add some padding and align the text correctly. To do this our HTML remains the same but our CSS might look something like:

As a result of the above our menu now has a background colour, formatted text and padding. I’ve also added a class to change the background colour when someone rolls over one of our menu items. We should now have something that looks like so:

Go ahead, try changing the colours and styles to match the look and feel of your site and give your users a quick and easy method of navigation.

Please note: If the above doesn’t work for you, you may need to look at adding a DOCTYPE to the top of your HTML. See here for more information on how to do this.