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;  	
}

[Mich_]

/*MI BASTA SETTARE QUI LE NUOVE COORDINATE?*/

Forse si`.
Prova a scrivere
bottom:0;
al posto di top:0;

Oppure forse devi usare:
bottom: -1em; /* oppure 1 em, senza il meno */
o qualcosa di simile (ad esempio 1.5 o una cosa del genere).

Se non funziona, devi cercare i vari posizionamenti dei sottomenu, e modificarli.
Oppure cerca tra i menu se ce n'e` qualcuno che si espande verso l'alto (mi pare di ricordarne qualcuno tra quelli di CSSplay).

[Luca_pluatrco]

Grazie Mich per il consiglio, ma mi sorge comunque il dubbio che, nel caso il sotto menu sia molto alto e il contenitore abbia invece un'altezza ridotta, il menu verrebbe nascosto nella sua parte superiore (avendo cosi' il problema opposto).

In quanto il problema alla base sarebbe l'overflow-y:hidden. Ad ogni modo se il tuo suggerimento funzionasse, potrei cercare di settare overflow-y:auto (anche se questo poi mi introduce notevoli scroll.bar verticale in vari altri componenti).

Da qui veniva l'idea di settare il sottomenu "appiccicandolo" solo il punto selezionato, in modo che non fosse legato al contenitore padre.


Grazie

[Mich_]

Il sottomenu puoi appiccicarlo dove vuoi.
Il problema pero` a quel punto e` la usabilita`, e la funzionalita` del tutto.

In uno schema di questo tipo:

<ul>[*]<a>voce primaria 1</a>[*]<a>voce primaria 2</a>
    <ul>[*]<a>sottovoce 2.1</a>[*]<a>sottovoce 2.2</a>[*]<a>sottovoce 2.3</a>
      ...[/list][*]<a>voce primaria 3</a>

Al[*] primario puoi non dare position e non dare position a nessuno dei suoi contenitori
Al <ul> secondario puoi dare position:absolute e top e left opportuni: in tal modo quando si apre il menu si apre nella zona della pagina dove vuoi (l'oggetto in posizione assoluta non rimane figlio dell'oggetto che lo contiene).

PERO` ...
pero` probabilmente non riuscirai a muoverti con il mouse dalla voce primaria 2 alle sottovoci 2.x.
E anche se ci riuscissi (supponendo che sia in zona contigua), l'utente si potrebbe trovare spaesato, se il sottomenu si apre in un posto a caso, e non attaccato al posto da dove viene aperto.

Altrimenti devi fare nel modo classico (con il top o con il bottom di cui sopra), ed eventualemnte usare JS per correggere la posizione SOLO SE qualcosa esce dal visibile. In teoria e` possibile, in pratica e` piuttosto complesso, dato che non puoi conoscere alcune caratteristiche del browser dell'utente (ad esempio i caratteri che usa, quanto e` grande l'area visualizzata, ...).

[Luca_pluatrco]

Sostituendo il parametro bottom:0; al precedente top:0; il sottomenu viene correttamente sviluppato dal basso verso l'alto con punto di partenza dove si trova l'immagine per il mouse hover.

Di nuovo tutto perfetto in IE, ma in firefox se sono sopra l'elemento della prima riga il menu viene nuovamente nascosto dal box che lo contiene.
Inizialmente pensavo fosse dovuto ad overflow-y:hidden; ma anche settando overflow-y:visible il problema persiste (come si vede nell'immagine in allegato).

Espandendosi verso l'alto il sottomenu non riesce a sovrapporsi al box padre (come fa invece IE) neppure settando un z-index molto elevato.

Tornando alla soluzione iniziale con il menu che si espande verso il basso e overflow:auto per entrambe le coordinate, posso mantenere il focus sul menu anche facendo scrolling con la rotellina del mouse, ma in una data posizione lo scroll bar verticale appare e scompare rapidamente, creando un effetto "farfallio".

Penso che l'unico modo per risolvere questo problema in Firefox sia davvero "appiccicare" il sotto menu in modo assoluto, ma pensavo (speravo) ci potesse essere una soluzione più profesionale.

Grazie di nuovo Mich

[Mich_]

Ritorno sul mio primo consiglio:

Oppure forse devi usare:
bottom: -1em; /* oppure 1 em, senza il meno */
o qualcosa di simile (ad esempio 1.5 o una cosa del genere).

Se poi IE si comporta in modo errato, puoi apportare la correzione tramite commenti condizionali.