Drop down menu non posizionato "top level" in FF con z-index (in IE funziona)

[Luca_pluatrco]

Ciao,

ho realizzato un drop down menu che viene inserito in una cella di una table. La table a sua volta è contenuta in un box container con horizontal scroll (in modo da tenere conto del numero dei campi della tabella, non noto a priori).

Con IE il menu a tendina si apre correttamente e, qualora sia in fondo alla table, esce dal box contenitore (come vorrei che fosse).
In FF invece il drop down menu quando si espande rimane nascosto "sotto" il box container (pur avendo usato lo z-index!).

Spero qualcuno possa aiutarmi ad individuare il problema.
Grazie

Qui il codice HTML:

<div class="WPBody">
[...]

<td>
    <div class="menu WPAdminMenu">
	<ul>
	[*]
		 [img]\gif\actionarrow.gif[/img]
     <div>
         <ul>[*]
		 [img]/Gif/edi.gif[/img]Edit
             
		
	[/list]
     </div>
      [/list]
 </div>
</td>

</div>

E quello CSS:

.WPAdminMenu{ float:right;} 
.WPAdminMenu ul ul { width:90px;}

.WPBody
{	
	width:93%;  /*Not 100% to consider margin and padding*/
	margin:0;
	padding:0 9px 5px 9px;
	overflow-x:auto !IMPORTANT;/*introduces horizontal scroll bar if needed*/
	overflow-y:hidden;
	}

/*Da qui la struttura generale per il Drop down menu*/
/* remove all list stylings */
.menu ul, .menu ul ul {
	margin: 0;
	padding: 0 3px 0 0;
	border: 0;
	list-style-type: none;
	display: block;
	z-index:20;
}

/* move all list items into one row, by floating them */
.menu ul li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: right;
}
 

/* define new starting point for the nested UL, thus making positioning it a piece of cake */
.menu ul li:hover {
	position: relative;
}


.menu li li 
{
	width: 98%;        /* force the submenu items into separate rows, while still keeping float:left (which resolves IE6 white-gap problem) */
	padding:1px 0;	
	text-align:left;		
	display:block;
}


/* fix the position for submenus.
first make sure no horizontal scrollbars are visible on initial page load by sliding them all into top-left corner  */
.menu ul li div{	top: 0;	right: 0;}


/* initialy hide all sub menus */
.menu ul li div {
	visibility: hidden;
	position: absolute;
	z-index: 10;
}

.menu li:hover>div {	visibility: visible;}

/* -- float.clear -- force containment of floated LIs inside of UL */
.menu ul:after, .menu ul ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
.menu ul, .menu ul ul {min-height: 0;}/* IE7 float clear: */
	
.menu div {
	background-image: url(empty.gif);	
	padding: 10px 0px 10px 10px;		
	margin: 10px 0px 0 0;			
	z-index:20;
}


.menu ul ul 
{
	min-width: 80px;	
	width:115px;	
	padding: 2px 2px 3px 28px;   	/*The SMALL_left faux col is 25px wide*/
	overflow:hidden; 
	z-index: 20;
}

.menu ul li a, .menu ul li a:hover { margin-left:2px; display:inline;}

.menu ul ul a, .menu ul ul  a:hover  {
	text-decoration: none;
	padding: 1px 2px 1px 4px;	
	display:block;             /* to increase clickable area as a’s default to inline */	
}

[fcaldera]

a occhio ti direi che il problema può essere dato dal fatto che manca un overflow:visible a qualche elemento (o forse è l'overflow-y: hidden dato all'elemento più esterno)

fai qualche prova: metti dei bordi visibili attorno ai vari elementi e guarda in corrispondenza de bordo di quale elemento viene tagliato il menu a tendina.

[Luca_pluatrco]

Se metto overflow-y:auto il menu si espande comunque "dentro" il div container, con la differenza che pero' ora ho la vertical scroll bar.
Tuttavia questa soluzione non è accettabile, anche perchè poi tutti gli altri contenitori dello stesso tipo visualizzano una barra di scorrimento verticale (anche per due linee di testo).

Non penso sia un overflow mancante, in quanto il menu è visualizzato interamente se non troppo vicino al bordo inferiore da scomparirvi sotto.
Piuttosto il problema mi pare sia proprio relativo al livello nel quale viene visualizzato il menu, quasi risultasse inferiore a quello del container, pur avendone impostato lo z-index esplicitamente.

La cosa strana è che in IE funziona bene....