Menu Rollover Effect Using HTML Lists

Introduction

This CSS example of the code has been created using HTML lists. It uses the least amount of html, which is always a good thing.

Step 1

First create a containing div which will hold our menu, simply:

<div id="list-menu">
</div>

At this stage we only need to define the width (positioning also if you like):

#list-menu {
width: 132px;
/* this width value is also effected by
the padding we will later set on the links. */
}

Step 2

Next we'll just create our test links in an unordered html list:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>

Step 3

Now we have to take control of the list by removing the indents. We also need to remove the default bullets (or numbers if you decided to use an ordered list)

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

Setting the margin and padding to zero removed the indents from IE/Opera and Netscape/Mozilla respectively. At this stage we can also define text styles by adding the following to the above CSS:

font-family: verdana, arial, sanf-serif;
font-size: 12px;

We should also create a little bit of space between the list items to improve presentation, so we create the following css for each list item:

#list-menu li {
margin: 2px 0 0;
}

This will place a margin of 2px above each list item.

At this stage we have the following:

Step 4

Now we just need to create styles for the actual links.

#list-menu a {
display: block;
width:120px;
padding: 2px 2px 2px 10px;
border: 1px solid #000000;
background: #dcdcdc;
text-decoration: none; /*lets remove the link underlines*/
}

An important point to mention at this stage is the width setting. When we tested this, leaving out the width setting caused the menu to mess up in IE6. This width combined with the side padding should equal the width we set for the container div in Step 1. 120px + (2px + 10px) = 132px

This gives us the following:

Step 5

The final step is to create the rollover-effect. Like any link rollover effect this is done using the psuedo classes which allow us to define the visited, active and hover states for the links:

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
color: #000000;
}

#list-menu a:hover {
border: 1px solid #000000;
background: #333333;
color: #ffffff;
}

So we now have the following:

For extra effect we could add a background image on hover:

#list-menu a:hover {
border: 1px solid #000000;
background: #333333 url(images/background1.gif);
color: #ffffff;
}

Which results in the following:

The background image I use here is the following:

As a last point, adding onfocus="this.blur()" into each link code will get rid of that annoying dotted line which appears when the link is clicked.

That's it. Now it's up to you to customise and play with.

Read other articles by Enda McGuinness.

About The Author:

Enda McGuinness
SSI Developer
http://www.ssi-developer.net/