CSS Menu With Rollover Images

Chris Coyier //

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