Styling Menus as Lists with CSS

Using CSS and Unordered Lists is an incredibly powerful way of presenting certain types of content. In this article I'll show you how to style a menu using an unordered list and a little CSS.

A word about the examples

In order to display the examples as they evolve it's necessary to use different classes for each example. If you want to take the final CSS and develop other list styles from it then you will only need the final stylesheet, for the class "list".

As we develop the examples, I'll show the CSS with the new additions and changes highlighted in bold so you can see the effect of each change.

Finally, these examples work best in CSS2-compliant browsers such as Firefox. They should look reasonably OK in non-compliant browsers such as Internet Explorer (eventually, at least) but it would take a lot more work to make them look identical in all browsers. Cross-browser compatibility for CSS2 when browsers such as Internet Explorer have such a poor implementation of CSS2 is far beyond the scope of a single article.

The List

First, let's have a look at how a list is structured. Here's a very simple list defined in HTML:

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
</ul>

With no styling, this will appear as follows:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Ugh!

Not terribly impressive, and so "Web 1.0". But the good news is that using CSS we can make lists look a lot nicer. Let's get rid of the bullets. We'll also put a border around the UL so we can see what we're doing. We'll remove the border when we're finished.

ul.list-1 {
	border: 1px solid #000;
}

.list-1 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

and give our list a class of list-1, vis:

<ul class='list-1'>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a></li>
</ul>

which gives us this:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Fixing the width

Ok, we can see from the border that we need to do something abut the width of the UL. While we're at it let's get rid of the underlines on the Anchor tags.

ul.list-2 {
	border: 1px solid #000;
	width: 10em;
}

.list-2 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list-2 a {
	text-decoration: none;
}

Remember, we're only changing the class so the examples work on a single page. When you apply these techniques to your own menus you'll only need one class. Here's the change to the class.

<ul class='list-2'>
...

And the list as it appears now:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Now, notice when you hover the mouse over the links, they change colour (they are actually picking up the default Website Repairs stylesheet). Unstyled they'd also show a different colour when they have been visited.

Hover

Let's fix the colour on Hover, and while we're at it we'll add a bit of padding around the Anchors.

Note: I'll only show the CSS from now on unless the HTML changes; I'm assuming you realise that the UL's class changes each time to match the next example along.

ul.list-3 {
	border: 1px solid #000;
	width: 10em;
}

.list-3 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list-3 a {
	padding: 4 8;
}

.list-3 a, .list-3 a:link, .list-3 a:visited, .list-3 a:hover {
	text-decoration: none;
	color: #00f;
}

This now renders as follows:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Background

Let's add a background colour.

ul.list-4 {
	border: 1px solid #000;
	width: 10em;
}

.list-4 li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list-4 a {
	display: block;
	padding: 4 8;
	background-color: #9cf;
}

.list-4 a, .list-4 a:link, .list-4 a:visited, .list-4 a:hover {
	text-decoration: none;
	color: #00f;
}

Here's what our a list of class list-4 looks like:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

UL Padding

Oh, dear. Now that we've styled the Anchors to have a blue background, we see that the UL is adding some padding to the left hand side. Let's get rid of that, and also while we're at it let's add a border to the left of the Anchors.

ul.list-5 {
	border: 1px solid #000;
	width: 10em;
	padding: 0px;
}

.list-5 li {
	list-style: none;
}

.list-5 a {
	display: block;
	padding: 4 8;
	background-color: #9cf;
	border-left: 8px solid #f90; 
}

.list-5 a, .list-5 a:link, .list-5 a:visited, .list-5 a:hover {
	text-decoration: none;
	color: #00f;
}

Here's how it looks now:

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Finishing Up

Ok, let's be daring and add a few things at once. We'll make the links and their left-hand border change colour when we hover over them, add some spacing between the list items, and let's get rid of the border around the List since we don't need it any more.

ul.list-6 {
	border: 1px solid #000;
	width: 10em;
	padding: 0px; 
}

.list-6 li {
	list-style: none;
	margin: 1 0;
}

.list-6 a {
	display: block;
	padding: 4 8;
	background-color: #9cf;
	border-left: 8px solid #f90;
}

.list-6 a, #list-6 a:link, #list-6 a:visited, #list-6 a:hover {
	text-decoration: none;
	color: #00f;
}

.list-6 a:hover {
	text-decoration: none;
	background-color: #00f;
	color: #9cf;
}

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Internet Explorer

If you are reading this page in one of the versions of Internet Explorer, you are probably wondering what's going on. Everything from list-3 onwards has far too much vertical spacing between the items. For those viewing in a proper browser such as Firefox, the image below shows what Internet Explorer users are seeing at this stage.

This isn't a fault of the CSS, it's a problem with Internet Explorer's implementation of CSS. No matter, let's fix things so that even Microsoft's brain-dead browser can cope with it.

Although it shouldn't be necessary, if we set the width of the Anchor tags to 100%, the problem goes away.

ul.list {
/*	border: 1px solid #000; */
	width: 10em;
	padding: 0px; 
}

.list li {
	list-style: none;
	margin: 1 0;
}

.list a {
	display: block;
	padding: 4 8;
	border-left: 8px solid #f90;
	background-color: #9cf;
	width: 100%;
}

.list a, #list a:link, #list a:visited, #list a:hover {
	text-decoration: none;
	color: #00f;
}

.list a:hover {
	text-decoration: none;
	background-color: #00f;
	color: #9cf;
	border-left: 8px solid #f00;
}

Here's the final list, in a form that even IE can cope with.

• Item One
• Item Two
• Item Three
• Item Four
• Item Five

Finally

This has been a very quick overview of *some* of the things you can do with CSS and Unordered Lists to quickly build easy to configure menus, but we've only scratched the surface. Now that you have the basics, browse on over to Listamatic where there are more CSS/UL menus than you can shake a stick at. I know you'll be impressed.