Cambiare direzione in cui si espande un menu a tendina

[Luca_pluatrco]

Ciao,

ho relaizzato un menu a tendina che si espande verso il basso. Tuttavia essendo usato in un contenitore con overflow-y:hidden; se il menu si trova in basso, esso viene "nascosto" nella porzione che eccede il contenitore (Solo in FF, mentr ein IE funziona bene!).

Ho pensato che potrei usare uno script per calcolare la posizione del menu nella pagina e fare in modo che venga posizionato di conseguenza solo il sottomenu. In tal modo il sottomenu non sarebbe piu' parte dell'attuale container, quindi lo sovrapporrei con posizionamento assoluto.

Questa sarebbe una scappatoia, dato che anche usando z-index sembra non volerne sapere in FF.
Sapreste dirmi se in FF posso far si che il menu a tendina non venga nascosto dal container (anche se overflow:hidden?

Altrimenti sapreste dirmi dove dovrei impostare le nuove coordinate di partenza?
Grazie

Qui il codice:

<div class="menu">
     <ul>[*]
             <div>
                    <ul>[*] ....  [/list]
              </div>
           [/list]
</div>




/* remove all list stylings */
.menu ul, .menu ul ul {
	margin: 0;
	padding: 0 3px 0 0;
	border: 0;
	list-style-type: none;
	display: block;
}

/* 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%;  
	padding:1px 0;	
	margin:0;
	text-align:left;		
	display:block;
}


/*MI BASTA SETTARE QUI LE NUOVE COORDINATE?*/
.menu ul li div{
	top: 0;
	right: 0;
}

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

/* display them on hover */
.menu li:hover>div {
	visibility: visible;
}

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

.menu ul ul 
{
	padding: 0; 
	border:1px solid Silver;
	background-color: #FFFFFF;
	overflow:hidden !important;  /*To hide the overflowing divisor line*/
	z-index: 20;
}



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


.menu ul ul a, .menu ul ul a:hover  {
	text-decoration: none;	
	margin:0;
	display:block;  	
}