a:hover not working... At all. Huh?!?

Thanks to Chris..S for the advice on my millions of a:classes, on closer inspection it all became clear and looked obvious... however it doesn't seem to work!!! It looks like it should and am curious why my hover styles aren't being activated. I've tried playing with it but can't seem to figure it out.

I have a deadline, otherwise I would be happy to work it out myself but really need a quick fix! Really grateful if someone could help.

www.sheroes.co.uk/sheroes_home

here's my CSS:

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:none;
}
a:active {
text-decoration:none;
}

#nav a {  
  font-size: 11px;
text-decoration: none;
text-transform:uppercase;
display: block;
margin-bottom: 1px;
padding: 3px;
width: 200px;
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-right: 19px solid #ffffff;
}

#nav a:hover, #nav a:active {
  text-align: right;
  color: #000000;
  background-color: #FFFFFF;
}

a.nav1:hover, a.nav1:active { border-right-color: #c0979c; }
a.nav2:hover, a.nav2:active { border-right-color: #c2c39a; }
a.nav3:hover, a.nav3:active { border-right-color: #9ac0b7; }
a.nav4:hover, a.nav4:active { border-right-color: #baabc0; }
a.nav5:hover, a.nav5:active { border-right-color: #92adc0; }
a.nav6:hover, a.nav6:active { border-right-color: #a9c08c; }