Immagine diversa al rollover per ogni voce di menu

[moncicci]

Ciao a tutti! io ho questo menu nella pagina principale (in .php):

<div id="menu"> 	
<ul> 		
<li><a href="#" class="current">Home Page</a></li> 		
<li><a href="#">About</a></li> 		
<li><a href="#">Music</a></li> 		
<li><a href="#">Photo</a></li> 		
<li><a href="#">Contact</a></li>								 
</ul> </div>

e questo css:

#menu{
margin:0 30px 10px 90px; }
#menu ul{ list-style:none; }
#menu li{list-style:none;display:block;float:left;margin:0 3px; padding:4px;border:1px solid #ccc;background:#fff; }
#menu li a{ display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold;background:#2f2f31; padding:15px 35px; text-decoration:none; }
#menu li a:hover{
display:block; float:left; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }
#menu li a.current{ display:block; float:left; color:#fff;
text-transform:uppercase; font-size:11px; font-weight:bold; padding:15px 35px; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }

La mia necessità è che, nella fase di rollover, sia visualizzata un'immagine diversa per ogni voce di menu (e che la scritta della voce scompaia se possibile).
Come dovrei modificare il css? Grazie mille!

 

[micio86]

Mmmmm..

<div id="menu"> 	
<ul> 		
<li><a href="#" class="current">Home Page</a></li> 		
<li><a href="#" class="about">About</a></li> 		
<li><a href="#" class="music">Music</a></li> 		
<li><a href="#" class="photo">Photo</a></li> 		
<li><a href="#" class="contact">Contact</a></li>								 
</ul> </div>

Nel css

#menu{
  margin:0 30px 10px 90px; 
}
#menu ul{ list-style:none; }
#menu li{list-style:none;display:block;float:left;margin:0 3px; padding:4px;border:1px solid #ccc;background:#fff; }
#menu li a{ display:block; float:left; color:#fff; text-transform:uppercase; font-size:11px; font-weight:bold;background:#2f2f31; padding:15px 35px; text-decoration:none; }
#menu li a .about:hover{
display:block; float:left; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }
#menu li a .music:hover{
display:block; float:left; background:#49740d url(../images/gradient2.jpg) no-repeat center top; text-decoration:none; }
#menu li a .photo:hover{
display:block; float:left; background:#49740d url(../images/gradient3.jpg) no-repeat center top; text-decoration:none; }

#menu li a.current{ display:block; float:left; color:#fff;
text-transform:uppercase; font-size:11px; font-weight:bold; padding:15px 35px; background:#49740d url(../images/gradient1.jpg) no-repeat center top; text-decoration:none; }

Non so se va ma l'idea è questa.

 

[moncicci]

ok, tutto fatto! grazie 1000 per l'aiuto! ciao!