Pulsante Overline!!!

[wave00]

Salve ragazzi ho un piccolo problema e non so se posso risolvere direttamente con i css, io vorrei realizzare dei pulsanti semplici e carini; praticamente dovrebbere funzionare così
quando sono in stato normale sono sottolineati in testa con un colore (blu o verde o rosso) e quando sono :hover voglio che siano sottolineati da sotto con lo stesso colore. La linea non deve essere molto fine. Non so se con i css si possa realizzare!!! cosa possa fare???non riesco nemmeno a fare l'immagine in photoshop e poi associarla infatti mi succede una cosa strana. In html ho creato questo menu:

<div id="menu">
	<ul>
	
 	[*]<span class="home">Home</span>[*] Contatti  
	
	[/list]
 </div>

solo che se uso il comando:

#menu ul li a{background-image:url(immagine per home);}

mi rimane sempre la scritta "Home" e come sfondo applica l'immagine.
quindi se volessi utilizzarlo non posso nemmeno farlo!!!

Se trovo un esempio di ciò che voglio realizzare posto il link.
:master:

[gabip87]

Io ho usato questo per cambiare il colore della sottolineatura, ma dovresti poter cambiare la sua posizione in stato di hover.

[wave00]

vero posso giocare con il border non ci avevo pensato. grazie