Css - navbar div bg changes but not text

1

hi all,

trying to do something that should be simple but is proving to be a real mare!
i have a navbar that i want to change bg and link colour on rollover/hover.

i can get the bg of the div to change but the text link colour stays black!

driving me nuts! anyone know what is wrong with my css? please?

i want the rollover text to change from black to orange on rollover.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Subnav w/ CSS &amp; jQuery</title>
<style type="text/css">
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color:#000;
}
h1 {
	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
	color: #333;
	margin: 0;
	padding: 5px 0;
}
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #000;
}
.container {width: 952px; margin: 0 auto;}



ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 952px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
		color: #ffffff;
	background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #000;
	
}
ul#topnav li a {
	padding: 10px 21px;
	display: block;
	color: #000000;
	text-decoration: none;
}
ul#topnav li:hover {  
background: #000000 url(topnav_active.jpg) repeat-x;
color:#FFF;
 }

</style>

</head>

<body>

<div class="container">	
	<h1>&nbsp;</h1>
	<div style="clear: both; display: block; padding-bottom: 20px;"></div>
    <ul id="topnav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">link1</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Other link</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Downloads</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
	

</div>

</body>
</html>