Need help with stagnant and hovering images please!

We recently decided to alphabetize the Specialties on our web pages (using the .php files from the Includes folder).

I have re-alphabetized them in both the .php file as well as the default.css file including making the first image coincide with the alphabetized list. However, when I do, the original image (for Hospitality) remains as the default image and only changes when you finally hover over Hospitality or anything below it.

Here's the way part of the original file is set up:

/* Images */
div#specialties ul li a.hospitality span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.hospitality:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/hospitality.jpg);
background-repeat: no-repeat;
z-index: 0;
}

And here's what I changed it to:

/* Images */
div#specialties ul li a.apartments span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}
div#specialties ul li a.apts:hover span.img {
position: absolute;
top: 0;
right: 0;
width: 222px;
height: 190px;
background-image: url(../images/apartments.jpg);
background-repeat: no-repeat;
z-index: 0;
}

Help! You can check out the current look at www.connellinsurance.com.
.