A Web Design Community curated by Chris Coyier

CSS Menu With Rollover Images

By: Chris Coyier on 7/13/2007

We just posted on the nastiness of javascript-based rollovers. We showed you the basics of how to do it with CSS instead, but now it’s time to put our money where our mouths are and provide a real example.

css rollover example

This menu example uses three possible states:
- Normal
- Rollover
- Selected

The code is really clean and simple and should be easy to understand. Feel free to download the example and do whatever your little hearts desire with it. The .ZIP includes the original Adobe Photoshop file for edit-age.

LIVE EXAMPLE

DOWNLOAD EXAMPLE

One Response

    This comment thread is closed. If you have important information to share, you can always contact me.

    * This website may or may not contain any actual CSS or Tricks.