CSS Menu With Rollover Images

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

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