Menu css con imagen rollover

Ejemplo menu con efecto rollover sólo con css.
Vía http://inobscuro.com/tutorials/read/19/

Modificación:

html

1 2 3 4 5 6 7

<ul class="menu"> <li class="home"><a href="#">Home</a></li> <li class="about"><a href="#">About</a></li> <li class="services"><a href="#">Services</a></li> <li class="contact"><a href="#">Contact</a></li> </ul>

css

1 2 3 4 5 6 7 8 9 10 11 12

.menu { margin: 0; padding: 0; width: 150px; list-style: none; background: #fff; } .menu li { padding: 0; margin: 0; height: 39px; list-style: none; background-repeat: no-repeat; } .menu li a, .menu li a:visited { display: block; text-decoration: none; text-indent: -9999px; height: 39px; background-repeat: no-repeat; } .home a{background-image: url(images/rollover01.gif);} .home a:hover {background-image: url(images/rollover01a.gif);} .about a{background-image: url(images/rollover02.gif);} .about a:hover {background-image: url(images/rollover02a.gif);} .services a{background-image: url(images/rollover03.gif);} .services a:hover {background-image: url(images/rollover03a.gif);} .contact a{background-image: url(images/rollover04.gif);} .contact a:hover {background-image: url(images/rollover04a.gif);}