Chce stworzyć menu poziome z przyciskami zaokraglonymi, by po najechaniu na przycisk zmieniał sie na jasniejszy ( inna grafika), przycisk pociąłem na 2 kawałki końcówka lewej strony przycisku i cała reszta, działa mi na kodzie poniżej, ale nie wiem jak ustawić by w a:hover podmieniał 2 grafiki zerknijcie poniżej, kod od linijki 32 do 40 nie działa

[HTML] pobierz, plaintext 
#top ul {
	list-style:none;
	margin:0px;
	padding:0px;
	position:absolute;
	top:10px;
	left:200px;
}
 
#top ul li {
	display:inline;
	float:left;
	background: url(../images/button_active.png) no-repeat center right ;
	height:26px;
	margin:0px 10px;
}
 
#top ul a:link, #top ul a:visited {
	background: url(../images/left_button_active.png) no-repeat  center left ;
	height:26px;
	float:left;
	text-decoration:none;
	text-align:center;
	padding: 0px 5px 0px 5px;
	line-height:23px;
}
 
#top ul li a:hover {
	background: url(../images/button_hover.png) no-repeat center right ;
}
 
#top ul a:hover {
	background: url(../images/left_button_hover.png) no-repeat  center left ;
	height:26px;
	float:left;
	text-decoration:none;
	text-align:center;
	padding: 0px 5px 0px 5px;
	line-height:23px;
}
 
[HTML] pobierz, plaintext 

Rollover

Tak jak widać w kodzie powyżej użyłem tego problem jest w tym że przycisk składa się z dwóch pocietych części i ta drugą cześć przycisku nie wiem jak załadować....