a continuacion un ejemplo bastante reducido de tu codigo. solo muestra un enlace y los estilos necesarios para dicho enlace. copialo tal cual lo vez y compruebalo. notaras que esta en estado original y cuando pasas el raton se cambia a gris. luego, agregale el ID "home" a body y comprueba que este cambia a estado activo.
Código:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<style type='text/css'>
ul#topnav {
margin: 0; padding: 0;
list-style: none;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
display: block;
height: 40px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left bottom;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
background-image: url(/images/home_a.jpg);
width: 68px;
}
/*-- actives pages --*/
#home li.home a{
background-position: left 40px;
}
</style>
</head>
<body> <!-- fijate que no tiene ID -->
<ul id="topnav">
<li class="home"><a href="home.html">Home</a></li>
</ul>
</body></html>
por cierto, creo que te viene bien comprender la especificidad de las reglas y como este afecta a tu documento,
http://www.w3.org/TR/CSS2/cascade.html#specificity. creo que es ahi donde estas teniendo problema.