Salve , ho un problema per quanto riguarda un abbellimento grafico per una select.

Il mio scopo sarebbe quello di trovare il modo ( funzionante almeno x IE6 e FireFox ) di modificare il background -color e la grandezza del font sull' onmouseover delle option. Pensavo fosse cosa facile visto che con Firefox bastava settare option:hover e il gioco era fatto. Poi ahimè ho constatato da subito però che su IE6 non andava affatto perche non è supportato l'attributo :hover di conseguenza mi sono scervellato nel trovare qualche soluzione ma nessuna funzionante. Vi posto anche qualche riga di codice con cui poter cominciare.


Copiando e incollando questa porzione di codice presa da un esempio bastato sulle liste funziona

vi ringrazio per l'aiuto.
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Suckerfish :hover example</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css media=all>BODY {
	FONT: 100% arial, helvetica, sans-serif
}
H1 {
	FONT-SIZE: 1.5em; COLOR: orange
}
A {
	COLOR: #006; TEXT-DECORATION: none
}
P:hover {
	COLOR: #ccc
}
P.sfhover {
	COLOR: #ccc
}
P:hover A {
	COLOR: blue; TEXT-DECORATION: underline
}
P.sfhover A {
	COLOR: blue; TEXT-DECORATION: underline
}
P A:hover {
	COLOR: orange
}
</STYLE>

<SCRIPT type=text/javascript><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementsByTagName("P");
	alert(this);
	alert(sfEls.length);
	alert("PRIMA "+this.className);
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
	     }
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></SCRIPT>

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY>
<H1>Suckerfish :hover</H1>


An example accompanying the <A 
href="http://www.htmldog.com/articles/suckerfish/hover/">Suckerfish :hover 
article</A> in HTML Dog.</P>


Move your cursor over the paragraphs to reveal any links that might be 
contained within them.</P>


Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Suspendisse 
egestas ultricies pede. Phasellus suscipit blandit risus. Praesent 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, accumsan 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P>


Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Suspendisse 
egestas ultricies pede. Phasellus suscipit blandit risus. Praesent 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, accumsan 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P>


Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Suspendisse 
egestas ultricies pede. Phasellus suscipit blandit risus. Praesent 
nonummy. <A href="http://www.htmldog.com/articles/suckerfish/hover/example/#">In 
erat</A>. Duis nibh pede, accumsan 
eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. 
Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. 
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis 
luctus. <A 
href="http://www.htmldog.com/articles/suckerfish/hover/example/#">Nunc 
porttitor</A> dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a 
vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. 
Praesent dui. Nulla accumsan turpis at erat.</P></BODY></HTML>

questo invece è quello che ho prodotto io...
codice:
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css media=all>
BODY {
	FONT: 100% arial, helvetica, sans-serif
}

OPTION:hover {
	COLOR: green;
	FONT-SIZE: 2.5em

}

</style>
<SCRIPT language= "Javascript" type="text/javascript"><![CDATA[//><!--
function rollON(value){
	alert(value.className);
}

function rollOFF(value){
	alert(value.className);
}

sfHover = function() {
	var sfEls = document.getElementsByTagName("option");
	alert("Numero option trovate = "sfEls.length);
	
	for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover = rollON(sfEls[i]);
			sfEls[i].onmouseout=sfEls[i].onmouseout = rollON(sfEls[i]);
		}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></SCRIPT>

<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY>
<select size="3" id="nav" multiple>
				<option value="0" >Primo</option>
				<option value="1" >Secondo</option>
				<option value="2" >Terzo</option>
			</select>
	</body>
</html>