There are now loads of places on the Internet where one can access free CSS menu's. But of the many that are available very few suceed in replicating the prehistoric roll-over image menu using javascript image replacement techniques, with only lovely CSS. I have managed to create one that works in both decent web browsers and crap ones (Internet Explorer), check it out.

First I needed to remove all padding and margins from the page:

* { padding: 0em; margin: 0em; }

Then the CSS for the #nav container div:

#nav img { border: none; }
#nav li { display: inline; list-style:none; }
#nav li a { float: left; display:block; width: 37px; height: 50px; margin: 5%; }
#nav li a img {  border:none; vertical-align:bottom; /* for IE6 */}
#nav li a:hover { visibility:visible; /* for IE6 */ }
#nav li a:hover img { visibility:visible; /* for IE6 */ }
#nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}

Internet Explorer requires something to happen on a:hover as well as a:hover img.

The menu list items all use different images on rollover so I defined each with a different ID on the anchor element:

#one { background:url(http://www.alanwho.com/examples/css/rollover_menu/1over.png) no-repeat left bottom; }
#two { background:url(http://www.alanwho.com/examples/css/rollover_menu/2over.png) no-repeat left bottom; }
#three { background:url(http://www.alanwho.com/examples/css/rollover_menu/3over.png) no-repeat left bottom; }
#four { background:url(http://www.alanwho.com/examples/css/rollover_menu/4over.png) no-repeat left bottom; }

Lastly I created a div with an id of nav and applied the CSS into the final XHTML:

The Final Rollover CSS Image Menu XHTML.

7 free CSS layouts that all validate to the XHTML 1.1 declaration.