:hover class problem

[treeghost]

HTML-Code:

#navi {
	background: url(navi.PNG) repeat;
	height: 66px;
	margin: 0 auto;
	position: fixed;
	top: 0;
    left: 0px;
	width: 100%;
    z-index: 100; <!-- /*Die Navigationsbar schwebt über den Inhalt*/-->

	}
	
	#navi li {
		float: left;
        text-align: center; <!-- /*Positionierung*/-->

	}
	
	#navi li a {
		display: block;
		font-size: 25px;
		height: 10px;
		padding: 20px;
		margin:0px 30px 20px 30px;
		text-shadow: 1px 1px 2px #000;
		text-transform: uppercase; <!-- /*Der Button*/-->
		
	}

#navi li a:hover {
	background: url(nav1.PNG);
	background-repeat:no-repeat;
	background-position: center;
	color: #fff;
        text-align: center;
	}
	
	#navi li:nth-child(2) a:hover{
	background: url(nav2.PNG);
	background-repeat:no-repeat;
	background-position: center;
}

#navi li:nth-child(3) a:hover{
	background: url(nav3.PNG);
	background-repeat:no-repeat;
	background-position: center;
}

#navi li:nth-child(4) a:hover{
	background: url(nav4.PNG);
	background-repeat:no-repeat;
	background-position: center;
}	

#navi li:nth-child(5) a:hover{
	background: url(nav5.PNG);
	background-repeat:no-repeat;
	background-position: center;
}
#navi li:nth-child(6) a:hover{
	background: url(nav6.PNG);
	background-repeat:no-repeat;
	background-position: center;
} <!-- /*nav1 ist wie gesagt der erste Button dann kommen die anderen die ich über nth-child() a:hover gemacht habe. Ohne a:hover hat es nicht funktioniert, da sonst sich nur background-image permanent verändert hätte*/-->

Ich bin nicht so gut im erklären.