Ciao...posto l'ennesima domanda sull'effetto fade. Non ho trovato soluzione nei precedenti post...
Vorrei fare un menu orizzontale con la struttura che vedete nel codice che ho postato. E' un esempio semplificato e ridotto, per concentrare il problema.

In pratica, sul primo livello...se passo col mouse, il secondo livello compare in verticale. Fin qui tutto ok, sia su FF che IE (per ie ho provato min-width, zoom e altri per permettere di ottenere l'effetto giusto).
Da secondo livello in poi...il menu si dovrebbe espandere in orizzontale (come i menu di qualsiasi applicazione eseguibile).
Per fare questo ho messo position:relative ai div con id item ed ho aggiunto un ulteriore div interno posizionato con position:absolute.
Su firefox, funziona a meraviglia. Invece, su ie non sono riuscito in nessun modo ad ottenere il risultato voluto. Quando vado su con il mouse, dal secondo livello in poi (sub1.1), gli elementi non vengono visualizzati per nulla. Se invece non uso il trucco del posizionamento relativo+assoluto (sub2.1),il fading funziona correttamente.

Per favore...qualcuno è in grado di capire cosa sto sbagliando? Ci sto diventando pazzo
Grazie
Federico

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<style>
#MenuSito{	
}

a {
	color:yellow;
	background-color:brown;
	width:140px;
	display:block;
	border:1px solid #990000;
}

div.headout{
	color:white;
	font-weight:bold;
	background-color:brown;
	width:140px;	
	border:1px solid #990000;
	cursor:pointer;	
}

div.level1item
{
	margin-bottom:2px;
}
</style>
<script>
function Show(id) {document.getElementById(id).style.display=""}
function Hide(id) {document.getElementById(id).style.display="none"}
function oShow(Obj) {if (Obj) Obj.style.display=""}
function oHide(Obj) {if (Obj) Obj.style.display="none"}

function GetOpacity(id) {
	Obj = document.getElementById(id);
	
	if (Obj.filters) return Obj.filters.alpha.opacity;
	if (Obj.style.opacity) return Obj.style.opacity*100;
	if (Obj.style.MozOpacity) return Obj.style.MozOpacity*100;
}

function SetOpacity(id,value) {
	Obj = document.getElementById(id);
	//alert(Obj.filters.alpha.opacity);
	if (Obj.filters) Obj.filters.alpha.opacity = value;
	if (Obj.style.opacity)Obj.style.opacity = value/100;
	if (Obj.style.MozOpacity) Obj.style.MozOpacity = value/100;
}

function FadeIn(id) {
	Show(id);
	for (i=0; i<=10; i++) {
		setTimeout("SetOpacity('"+id+"',"+i*10+")",i*10);
	}
}
</script>
<body>
<div id='MenuSito'>
	<div id='box1' style='float:left'>
		<div id='head1' class='headout level1item' onmouseover='FadeIn("item1");'>Sub1</div>
		<div id='item1' style='min-width:0;display:none;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;'>
			<div id='box1.1'>
				<div id='head1.1' class='headout' onmouseover='FadeIn("item1.1");'>Sub1.1</div>
				<div id='item1.1' style='min-width:0;display:none;position:relative;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;' >
					<div style='position:absolute;left:142px;top:-22px;'>
						Link1.1.1
						Link1.1.2
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div id='box2' style='float:left'>
		<div id='head2' class='headout level1item' onmouseover='FadeIn("item2");'>Sub2</div>
		<div id='item2' style='min-width:0;display:none;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;'>
			<div id='box2.1'>
				<div id='head2.1' class='headout' onmouseover='FadeIn("item2.1");'>Sub2.1</div>
				<div id='item2.1' style='min-width:0;display:none;/*position:relative;*/filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;' >
					
						Link2.1.1
						Link2.1.2
					
				</div>
			</div>
		</div>		
	</div>
	Link3
</div>
</body>
</html>