codice:
<div id="topmenu">
	<ul>
		<li id="mi1">Home
		<li id="mi2">About

		<li id="mi3">Services
		<li id="mi4">Portfolio
		<li id="mi5">Blog
		<li id="mi6">Contact
		<li id="mi7">Colophon
	[/list]

	
	[img]../img/version3.gif[/img]
	
</div>

e i css

codice:
#topmenu { background-image: url(../img/topmenuBG.gif); height:35px; padding:0 0 0 10px; }
#topmenu ul { float:left;  list-style-type:none; }
#topmenu ul li { float:left; margin:0 14px 0 0; }
#topmenu ul li a { display:block; text-indent: -9000px; width:57px; height:35px; text-decoration:none; }

#topmenu #mi1 a { background: url(../img/Mhome.gif) no-repeat; width:57px; }
#topmenu #mi2 a { background: url(../img/Mabout.gif) no-repeat; width:57px; }
#topmenu #mi3 a { background: url(../img/Mservices.gif) no-repeat; width:69px; }
#topmenu #mi4 a { background: url(../img/Mportfolio.gif) no-repeat; width:73px; }
#topmenu #mi5 a { background: url(../img/Mblog.gif) no-repeat; width:48px; }
#topmenu #mi6 a { background: url(../img/Mcontact.gif) no-repeat; width:68px; }
#topmenu #mi7 a { background: url(../img/Mcolophon.gif) no-repeat; width:75px; }

#topmenu #mi1 a:HOVER, #topmenu #mi2 a:HOVER, #topmenu #mi3 a:HOVER, #topmenu #mi4 a:HOVER, #topmenu #mi5 a:HOVER, #topmenu #mi6 a:HOVER, #topmenu #mi7 a:HOVER { background-position:0 -35px; }
#topmenu #mi1 a.on, #topmenu #mi2 a.on, #topmenu #mi3 a.on, #topmenu #mi4 a.on, #topmenu #mi5 a.on, #topmenu #mi6 a.on, #topmenu #mi7 a.on { background-position:0 -35px;   }
Vi invito a guardare le immagini

http://www.irishstu.com/img/Mhome.gif

E' la stessa immagine: il rollover si ha perchè si cambia la posizione dello sfondo ( background-position:0 -35px



Ciauuu