Introduction
This guide shows how to create a stylish rollover effect for a menu which might normally be done with images. CSS is used for the menu's on the right

First we create the links. Each link is contained in a table cell, the entire table is nested in a DIV which I will explain later. We assign the same class to both the table and the div. We also add onfocus="this.blur()" to get rid of the annoying dotted line on links.

<div class="menu">
<table summary="" cellpadding="1" cellspacing="1" class="menu">
<tr>
<td><a href="#" onfocus="this.blur()"> Link 1</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 2</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 3</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 4</a></td>
</tr>
<tr>
<td><a href="#" onfocus="this.blur()"> Link 5</a></td>
</tr>
</table>
</div>

The result is (centered for presentation):

Ok, not so pretty so now we specify styles for these. For the table (.menu) we specify the following:

table.menu a {
width:125px;
border:1px solid #333333;
display: block;
}

Result:

The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. Told you we need it!

div.menu a {
color: #333333;
background: #ffffff;
text-decoration:none;
font-size:11px;
line-height:16px;
font-family: Tahoma, verdana, sans-serif;
}

We then specify the link colours including the hover styles which creates our highlight effect:

div.menu a:link {
      color: #333333;
      background: #cccc99; }
div.menu a:active {
      color: #000000;
      background: #cccc99; }
div.menu a:visited {
      color: #333333;
      background: #cccc99; }
div.menu a:hover {
      color: #eeeeee;
      background: #333333;
      border:1px solid #000000; }

And the result?

IE can be a little slow changing styles on links so we have to specify the following for the outer div:

div.menu (
      position:absolute;
      top:0;
      left:0;
   )