script per lista a comparsa

[giancarlo75]

Ho una lista html che ha circa questa struttura:

<ul class="menu">
	[*]1
	[*]2
	[*]
		3
		<ul>
			[*]3.1
			[*]3.2
		[/list]
	
	[*]4[/list]

conoscendo solo la classe dell'elemento ul, posso raggiungere tutti gli elementi li annidati nel secondo livello? dei quali non conosco il numero quindi possono anche non esserci.
Avrei necessità di creare uno script che renda visibili gli elementi di secondo livello solo se il mouse passa sopra gli elementi di primo livello che li contengono.
Esiste già qualcosa di simile da prendere come esempio?

[dragon88]

Per fare ciò ti basta semplicemente questo codice css:

 
 ul {
    list-style:none;
    display:inline;
 }
 ul li {
    display:none;
 }
 ul li:hover {
    display:block;
 }

[giancarlo75]

Non è così, lo si può verificare subito inserendo tutto il codice in una pagina html:

<style type="text/css">
 ul {
    list-style:none;
    display:inline;
 }
 ul li {
    display:none;
 }
 ul li:hover {
    display:block;
 }

</style>
<ul class="menu">
	[*]1
	[*]2
	[*]
		3
		<ul>
			[*]3.1
			[*]3.2
		[/list]
	
	[*]4[/list]

Così non funziona perchè prima di tutto nascondo gli elementi al primo livello della lista con:
ul li { display:none;}
mentre semmai dovrei nascondere il secondo livello, così:
ul.menu li ul { display:none;}
ma anche quando ho nascosto il secondo livello, non posso farlo riapparire con un semplice css, in quanto i selettori di stato (:hover, :focus, :active ecc..) il css li applica solo agli elementi interessati allo stato dichiarato (in questo caso gli elementi al primo livello della lista:
ul.menu li:hover) e non ad altri elementi.
Per questo i menu dinamici hanno sempre codice javascript.
Se la lista fosse costruita staticamente in html mi sarebbe facile attribuire delle classi agli elementi di secondo livello e creare l'effetto rollover, ma siccome la lista viene costruita dinamicamente, non posso aggiungere classi e non conosco il numero degli elementi della lista (che possono essere aggiunti o tolti dinamicamente con Joomla) quindi tutto si complica perchè l'unico dato certo è la classe della lista principale.

[dragon88]

hai ragione, scusa, infatti volevo scrivere cosi:

 
ul.menu {
   list-style:none;
   display:inline;
}
ul.menu li ul {
   display:none;
}
ul.menu li:hover ul {
   display:block
}

Non ho ban capito per quale motivo devi realizzarlo in javascript?

[giancarlo75]

Funziona!!! hai ragione.
Volevo realizzarlo in javascript perchè credevo fosse l'unico modo possibile, ma visto che funziona ed è anche più compatibile lo faccio con i css.
Grazie mille.

[dragon88]

In effetti puoi anche realizzarlo in javascript, ma spesso con javascript vengono realizzati menu con effetti.

In ogni caso se ti serve puoi dare un'occhiata qui:
http://www.webquadro.it/2009/06/css-...a-tre-livelli/