problema con immagine di sfondo sull'hover

[elyy82]

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

[elyy82]

Nessuno?

[CitizenJ]

Guarda che queste cose vanno realizzate con javascript

[elyy82]

No no, ci sono riuscita con un semplice css...e in questo modo:

<ul id="menu"> [*]ABOUT ME<span></span> [/list]




#menu {
list-style: none;
padding: 0;
margin: 0;
width: 590px;
height: 65px;
position: relative;
color:#8b175d;

}


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

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

#menu span {
display: none;
position: absolute;

}
#menu a {
display: block;
/*text-indent: -900%;*/
position: absolute;
/*outline: none;*/
color:#8b175d;
text-decoration:none;
left: 186px;
top: 91px;
height: 63px;
}

#menu a:hover {
background-position: top center;
text-decoration:none;
cursorointer

}
#menu a:hover span{
display: block;
color:#8b175d
}


#menu .home {
width: 144px;
height: 65px;
left: 65px;
top: 91px;
color:#8b175d
}


#menu .home span {
width: 127px;
height: 65px;
background-image:url(../immagini/sf-chisono.gif);
background-repeat:no-repeat;
left: 18px;
top: -30px;

}