Navigation With Lists (Horizontal)

To start off we need to use a basic list code. I have wrapped the list up inside a div because it makes it a lot easier to customize the entire list.

Here's the HTML code:

From here, we only need to customize the CSS code.

To remove the bullets from the list we use the code:

list-style-type: none;

And we will also remove all padding and set the margin to zero. So far our CSS code is:

#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

Lets see what using the above codes would give us. Check out the beginnings of our horizontal navigation using lists.

The next part of the code is what makes the navigation go horizontal instead of making the list vertical down the page. This is the display attribute.

#navigation ul li {
display: inline;
}

This makes all list elements below the UL have an inline style. i.e. next to each other instead of one on top of another. The next step would be to customize the links, lets start by removing the underline.

#navigation ul li a {
text-decoration: none;
}

Lets take a look at what we have so far. Example 2 of our horizontal list navigation using CSS.

Next up, spacing. We don't need our links so close together, so lets add some padding to give them some distance. 10 pixels on both the left and right should do.

padding: 0px 10px 0px 10px;

If you don't understand my method of padding take a look at my CSS padding tutorial.

Where do we go from here? Well, lets add a background colour and change the text colour to make it look a bit nicer.

#navigation ul li a {
text-decoration: none;
padding: 0px 10px 0px 10px;
background-color: #DDEEFF;
color: #369;
}

So, where does this get us? Take a look at what we have so far with example 3 of our horizontal list navigation using CSS.

The final item on our agenda is to give each link a rollover colour (a:hover). This will then finish off our navigation.

#navigation ul li a:hover {
background-color: #369;
color: #fff;
}

And there we have it, a very nice looking horizontal navigation using lists. Take a look at one I made earlier with the 4th and final example of our horizontal list navigation using CSS.

Very nice I'm sure you will agree.