Far apparire testo sopra un link con mouse hover non funziona

[Luca_pluatrco]

Ciao,

utilizzo la tecnica <ul> e[*] per disporre orizzontalmente una serie di link ognuno dei quali fa riferimento ad un'immagine tramite la tecnica "sprite". Al mouse over, uno span (normalmente invisibile) deve essere reso visibile sopra la relativa immagine/link sulla quale è il mouse.

Tuttavia la regola :hover applicata allo span non viene applicata.Sapreste indicarmi come fare?

In allegato l'effetto che vorrei ottenere.Grazie

<div class="">
<ul>
    <li class="page-home">
        <a href="/home/">
            <span>Home</span>
        </a>
    
    <li class="page-my-credit">
        <a href="/my-credit/">
            <span>My credit</span>
        </a>
    
    <li class="page-resources">
        <a href="/resources/">
            <span>Resources</span>
        </a>
    
    <li class="page-mail">
        <a href="/mail/">
            <span>Mail</span>
        </a>
    
    <li class="page-ventures">
        <a href="/ventures/">
            <span>Ventures</span>
        </a>
    

       ...
[/list]
</div>

.HeaderLinksWrapper ul
{
	display:inline;
	float:left;
	margin-top:55px;
	width:430px;			
}


.HeaderLinksWrapper ul 
{
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
}

.HeaderLinksWrapper ul li
{
        /*nav-icons è un'unica immagine con tutte le icone*/
	background:url(images/Backgrounds/nav-icons.png) no-repeat left top;
	float:left;
	height:25px;
	margin-right:8px;
	width:25px;	
}

.HeaderLinksWrapper ul li.page-home
{
	background-position:0 0;
}

.HeaderLinksWrapper ul li a 
{
	float:left;
	height:25px;
	width:25px;
}

.HeaderLinksWrapper
{
	float:left;
	margin-left:145px;
}

.HeaderLinksWrapper  ul li a span {
background:Transparent url(images/Backgrounds/nav-active.png) no-repeat center bottom;
visibility:hidden;
padding-bottom:8px;
position:relative;
text-align:center;
text-transform:lowercase;
top:-25px;
}

/*Non riesco a rendere visibile lo span al mouse hover*/
.HeaderLinksWrapper a span:hover
{
	visibility:visible;
}