Unique Background Image - horizontal menu

Hi Jason et. al.!

I've got a horizontal CSS MenuWriter menu that's been working great for several months. One requirement that I've been asked to implement is to change our Donate button to a unique color at the root level of the menu. The code for the images in the menu is as follows:

ul#cssmw3 > li {
background-image: url("../cssmw3_images/left_act.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li > span {
background-image: url("../cssmw3_images/right_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li > span > a, ul#cssmw3 > li > span > a:link {
background-image: url("../cssmw3_images/center_act.jpg");
background-repeat: repeat-x;
color: #F1F3F2;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 8px 0 8px;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 108px;
outline-style: none;
}
ul#cssmw3 > li:hover {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li.hover {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}

ul#cssmw3 > li.current {
background-image: url("../cssmw3_images/left_hover_act.gif");
background-position: left top;
background-repeat: no-repeat;
}
ul#cssmw3 > li:hover > span {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li.hover > span {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}

ul#cssmw3 > li.current > span.current {
background-image: url("../cssmw3_images/right_hover_act.gif");
background-position: right top;
background-repeat: no-repeat;
display: block;
}
ul#cssmw3 > li:hover > span > a, ul#cssmw3 > li:hover > span > a:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li.hover > span > a, ul#cssmw3 > li.hover > span > a:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

ul#cssmw3 > li.current > span.current > a.current, ul#cssmw3 > li.current > span.current > a.current:link {
background-image: url("../cssmw3_images/center_hover_act.jpg");
background-repeat: repeat-x;
color: #273015;
font-weight: bold;
text-decoration: none;
outline-style: none;
}

As you can see, the background images are from slices and I have a default image set and a hover image set. I read a thread entitled "Main Menu Level - Different Backgrounds?" and tried the technique by editing the <li> tag in the menu.php file:

<li><span><a href="<url goes here>" target="_blank" style="background-image:url(../cssmw3_images/<image source file>)">Donate Now</a></span></li>

but when I load the page it still shows the original background from the menu.css.

Any help would be appreciated!