Aiuto su Menù a tendina

[gnola]

Salve a tutti,
sto cercando di risolvere un problema su un menù.
Sono partita da uno dei menù di CSSPlay e l'ho adattato alle mie esigenze...purtroppo però non riesco del tutto a personalizzarlo anche perchè il codice css è più avanzato rispetto alle mie conoscenze quindi mi sono bloccata un pò...inoltre ho appena notato che con Opera non si vede per niente bene

a questo link ho messo il codice:

http://www.asersrl.com/provamenu/provamenu.php


In pratica le tendine che si aprono dovrebbero o partire ognuna sotto la propria voce principale ed estendersi in base al numero verso destra...oppure dovrebbero tutte partire sempre dal margine sinistro del box celeste e svilupparsi sempre verso destra.

Su opera purtroppo ho visto adesso che anche il menù di partenza non funziona bene quindi non penso ci sia soluzione per quello..però per il momento vorrei riuscire a farlo visualizzare correttamente almeno nei browser principali...oppure c'è una soluzione alternativa che potrei utilizzare?

Chi può darmi una mano?

[MAeSI]

Ciao, prova ad assegnare position:relative a .flexMenu li > div

[gnola]

Grande!!! bastava così poco!!
E se invece volessi farli partire a prescindere tutti dal bordo sinistro? perchè le tendine del menù Categorie possono aumentare quindi se diventano su 4 colonne poi in effetti vanno a sforare dal riquadro e si sovrappongono agli altri elementi che saranno nella colonna di destra, quindi forse sarebbe meglio partissero tutti da sinistra. Si può fare? Ho provato a mettere una classe differente ai due div e differenziare il codice così:

.flexMenu li > div.menuserv {
width:185px;
position:relative; 
left:-9999px; 
width:100%; 
padding:4px 0; 
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
text-align:left;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}



.flexMenu li > div.menucat {
width:185px;
position:absolute; 
left:-9999px; 
width:100%; 
padding:4px 0; 
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
text-align:left;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}

ma non cambia nulla...

[MAeSI]

Forse ti è sufficiente creare questa regola:

.flexMenu li:hover.vocearancio > div {
    left: -187px;
}

[gnola]

Grazieeee si ora funziona!!!!
Sei stato gentilissimo non ci sarei mai arrivata da sola neanche a forza di tentativi! Fra qualche giorno inizierò un corso avanzato sui css spero di capirci un pò di più su queste regole!

ciao!!!

[gnola]

Ciao a tutti,
ho un nuovo problema che riguarda questo menù a tendina:

http://www.asersrl.com/provamenu/provamenu.php

Come posso fare per evitare che le tendine appaiano appena si entra nell'area del menù che ho evidenziato adesso in celeste? Dovrebbero aprirsi solo se passo sulle due voci principali Servizi e Categorie...

[Mich_]

Ci sono nel tuo codice HTML una serie di elementi che non servono, e potrebbero dare il problema.
All'interno dei <li> ci sono dei <div> che dal punto di vista semantico non servono (o sono addirittura d'intralcio).

PS: potrebbe essere che togliendo i <div> debba modificare il CSS di conseguenza (io non ho controllato il codice CSS)

Nota: ho unito le discussioni, dato che si tratta di un problema sulla stessa pagina, che e` sorto dopo aver corretto il primo

[MAeSI]

@gnola

Questa dovrebbe essere la fonte di quel menu: http://www.cssplay.co.uk/menus/csspl...-droplist.html

Ho guardato meglio il CSS e per "allinearlo" a sinistra, come chiedevi nel primo post, ho solo rimosso flex:1 al selettore .flexMenu li div div

Ho fatto un test qui

Se nel tuo esempio online si ripristina il position:absolute il problema c'è ancora e la causa dovrebbe essere l'altezza assegnata un po' ovunque.