CSS Image Sprite

[davy_yg]

page-about.php

<div id="AboutNav">					
		<h3>About</h3>
            <p style="border-bottom: 1px dotted #787878; width: 200px;"></p> 
				<ul>                
                	<li><a href="https://localhost/wordpress/about/">Vision & Mission</a></li>
                	<li><a href="https://localhost/wordpress/about/">History</a></li>
                	<li><a href="https://localhost/wordpress/about/">Client</a></li>
                	<li><a href="https://localhost/wordpress/about/">People</a></li>
                </ul>    
            
</div>

style.css

#AboutNav li a:link{
	background: url(images/About/AboutNav2.png) 0 20px ;	
	width: 100px;
    text-decoration: none;
	color: black; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	padding: 10px;
	display: block;
	}	

#AboutNav li a:hover{
	background: url(images/About/AboutNav2.png) 40 40px;	
	width: 100px;
    text-decoration: none;
	color: red; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	display: block;
	}	
	
#AboutNav li a:visited{
	background: url(images/About/AboutNav2.png) 0 20px;	
	width: 100px;
    text-decoration: none;
	color: red; Arial, Helvetica, sans-serif;	
	font-size: 12px;
	display: block;
	}

Hi, At this point I have red text with gray background only as long as the text. It suppose to be black text, turns red on hover and full image Nav background (not only as long as the text size).

Why is it ?