Ciao a tutti, sono alle prese con un menu tipo questo
http://www.elisacarlini.it/new/immagini/esempio.jpg
All'hover si dovrebbe associare un'immagine di sfondo che appare sopra il mio link

Ho provato a riprodurlo, ma non ci sto riuscendo.
Il mio codice HTML è questo:
<div id="menu">

<ul id="nav">
<li id="nav-home" >ABOUT ME <span></span>
<li >PORTFOLIO
<li > CONTACT [/list]
</div>


e il mio CSS:
#menu{
background-color:#FFFFFF;
width:590px;
float:left;
display:inline;
margin-top:50px;
height:65px

}



#menu li{
display:inline;
font-size:22px;
color:#8b175d;
padding-right:20px
}


#menu ul{
margin:0;
padding-top:45px;
padding-left:55px;

}



#nav {
list-style-positionutside;
list-style-image:none;
text-transform:uppercase;
position:relative;
}


#nav-home span {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background-image:transparent url(../immagini/sf-chisono.gif) ;
height:65px;
width:127px;
}

#nav span {
display:none;
position:absolute;
}

Non mi si vede l'immagine di sfondo quando vado sopra ABOUT ME..:-(( e non trovo l'errore..
Qualcuno sa aiutarmi?

Grazie

Elisa