CSS Image rollover menu lists

Today I needed to build a menu consisting of images for a new website we are launching in a couple of days. I wanted to use a simple list with the links and use the background property for each li element to show the images. The text in the link-images were rotated and that caused a problem, I had to hide the default link text when the style sheet was loaded and display the text when the style sheet was unavailable (if you for example are having visual problems or use a PDA).

The next problem was to have a nice way to change the background image if a link is active or if a link is hovered. This can be done using JavaScripts, but I wanted to use CSS instead. This can be achieved using the a:hover pseudo class and output a class=”active” for the active element.

If this sounds like something you need, read the following:

  • Stuart Langridge describes how a background image can ”override” the default text in an element
  • Pixy describes how rollovers without JavaScripts can be accomplished
  • SimpleBits describes how these two techniques can be combined

Update (060731): I have found one problem with this solution. If you surf the site with CSS enabled, but images disabled you are not going to see the menu. I have not yet any solution to this, but I’ll update this post once I have found a solution.