Hover su immagini non riesco a replicarlo

[lucaeffe]

Ho estrapolato un codice CSS da un sito con un effetto che mi interessava.
L'effetto è un hover su di una immagine che funge da link.
In pratica al passaggio del mouse un immaggine si sovrappone a quella di default nella pagina.

Modificando il codice nella pagina stessa riesco a customizzare gli effetti a mio piacimento ma se voglio portarli in una nuova pagina non ci riesco.
Posto il codice magari riuscite a vedere qualche errore che io non vedo?

		
		<div id="promo_panel">
			<ul id="promo_nav">
				<li class="prev">Previous
				<li class="next">Next
			[/list]

/*---------------------
	NEXT AND PREVIOUS
*/

#promo_nav li{
	display:block;
	position:absolute;
	top:118px;
	width:76px;
	height:76px;
	z-index:200;
}
#promo_nav li.prev{
	background-image:url(PREV.png);
	background-repeat:no-repeat;
	margin:0 0 0 -100px;
	z-index:1;
	
}
#promo_nav li.next{
	background-image:url(NEXT.png);
	background-repeat:no-repeat;
	margin:0 0 0 820px;
	z-index:1;
	
}

#promo_nav li a{
	display:block;
	width:30px;
	height:100%;
	text-indent:-5000px;
	outline:none;

}
#promo_nav li.prev a{
	background-position:left bottom;
	outline:none;
}
#promo_nav li.prev a:hover{
	background-position:left top;
	background-image:url(PREV_hover.png);
	background-repeat:no-repeat;
	outline:none;
}
#promo_nav li.next a{
	background-position:right bottom;
	outline:none;
}
#promo_nav li.next a:hover{
	background-position:right top;
	background-image:url(NEXT_hover.png);
	background-repeat:no-repeat;
	outline:none;
}