menu a tendina ed elementi sovrepposti

[wormhole]

Salve a tutti,
ho questo problema che proprio non riesco a risolvere.

Ho realizzato un menù a tendina tramite CSS (per ie 6 ho utilizzato un hack scritto in js) che funzionerebbe benne su ie7 e ff se non solo che mentre su quest'ultimo non ho nessun problema, su ie7 invece i menù a tendina che si espandono quando passo col mouse sopra il link padre vanno a posizionarsi sotto gli stessi elementi padre.
In poche parole se passo il mouse sopra il link da espandere, il menu espanso va sotto tutti gli altri elementi.

Sinceramente non riesco a trovare una soluzione, ho provato con z-index ma su ff nessun problema, mentre su ie (manco a dirlo) non ottengo nessun effetto. Magari sbaglio ad utilizzare correttamente z-index.

Di seguito incollo le porzioni di codice relative:

<div id="menu"> 
				<ul>
					[*]home
					[*]chi siamo
					[*]servizi						
						<ul class="sub-servizi">
							[*]eventi
							[*]conferenze
							[*]musicali
						[/list]						
					
					[*]prodotti
						<ul class="sub-prodotti">
							[*]aziende
							[*]usato
						[/list]
					
				[/list]
				<ul>
					[*]referenze
						<ul class="sub-video">
							[*]eventi
							[*]conferenze
							[*]musicali
						[/list]
					
					[*]galleria video
						<ul class="sub-video">
							[*]eventi
							[*]conferenze
							[*]musicali
						[/list]
					
					[*]galleria immagini
						<ul class="sub-immagini">
							[*]eventi
							[*]conferenze
							[*]musicali
						[/list]
										
				[/list]
</div>

#menu {
	height: 80px;
	font-size: 1.1em;
	padding-top: 7px;
	padding-left: 5px;	
}
#menu ul {
	list-style-type: none;
	margin:0 5px 0 0; padding:0;
	float: left;
}
#menu ul li { position: relative; height: 17px; display:inline; padding: 0; margin: 0;}
#menu ul li a {
	margin-bottom: 3px;
	display: block; 
	color: #fff; 
	font-weight: bold; 
	background: url(images/menu_gall_img.png) 100% 0 repeat-y; 
	width: 127px; height: 17px; line-height: 17px;
	padding-left: 3px;
}
#menu ul li a:hover {
	color: #6286df; 
	background: url(images/menu_gall_img_roll.png) 100% 0 repeat-y;
	width: 125px; border-left: 2px solid #6286df;
}
#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; position: absolute; top: 0px; left: 65px; }
#menu ul li:hover ul li { border: 0; }
#menu ul li:hover ul li a { border-left: 2px solid #4d4d4d; background: #6286df; margin-bottom: 0px; }
#menu ul li:hover ul li a:hover { border-left: 2px solid #6286df; background: #4d4d4d; width: 127px;}

Sapete darmi una mano?

Grazie Mille.

gp

[axxe16]

umh forse è un problema di margini...

perchè mi metti border-left: 2px solid #6286df; sull'hover?