Menú Rollover con CSS y una sola imagen

Resumen del recurso

La facilidad con la que se pueden diseñar distintos tipos de rollovers en CSS nos ha facilitado el trabajo, ya no es necesario incluir código javascript ni crear distintas imágenes para poder hacer un menú atractivo y prolijo, sin embargo, hasta el momento no es común encontrar artículos que traten sobre el background-position en la creación de rollovers con CSS

Índice de contenidos

1. Menú Rollover con CSS y una sola imagen
2. Creación de la Imagen
3. Creación del Rollover con CSS
4. Y finalmente el HTML