Con listas puedes poner el texto en el html y con css aplicar el fondo.
Las clases son reglas que se pueden aplicar múltiples veces, no tienes que crear una clase por cada opción del menú.
Luego también existe selectores descendientes no hace falta que le pongas una class a todo.
Por ejemplo:
Código CSS:
Ver original.lista{color:#0C6;}
.lista li{background:#C03;}
.lista li:hover{background:#069;}
Con lo que ves inicialmente el texto de cada <li> tiene un color. Los selectores descendientes sería la segunda linea, la que da el background. Aquí igual no tiene mucha lógica pero si el ejemplo fueran párrafos dentro de un <div> le daría el color de fondo a cada párrafo y no a toda la caja.
Finalmente tienes hover. Eso te permite cambiar el color de fondo cuando se pasa el puntero por encima. Color o imagen o lo que sea.
En resumen, que tampoco tienes que escribir tantas clases.
El tema de las imágenes de sustitución. Si montas la imagen en el mismo archivo irá más fluido ya que en cuanto la imagen se carga ambas partes lo están. No suele suponer mucho peso.
Para gestionar una imagen de fondo te puede servir esto.
Código CSS:
Ver original.lista li{ background:url(imagen.gif) 0px 0px no-repeat;}
.lista li:hover{ background:url(imagen.gif) 0px -27px no-repeat;}
En este caso la imagen ocuparía 54px de alto. Los primero 27px sería el fondo en reposo y los otros 27px de alto sería el fondo activado. Simplemente se le dice al navegador que desplace la imagen.
Espero que esto te sirva un poco de ayuda.