I often run into the problem of needing a different background image for each of my menu items (say I want to have an icon of home on the home page link, an envelope on the contact us page, etc.). I usually write a different css class for each of the menu links like this:
Ya, pretty standard, but you could shorten it a bit. You don't need to declare background-color if you've already put a colour in the 'background' declaration. For example:
#left_menu ul li a.home:hover{
background: #ccc url(images/home.jpg) no-repeat;
background-color: #fff;
}
//can be shortened to
#left_menu ul li a.home:hover{
background: #fff url(images/home.jpg) no-repeat;
}
You also don't need to redeclare the background color and image for the 'hover' state: