focus, hover e active su iPAD

[Reiuky]

Ciao a tutti.

Ho questo problema: su un menu si desidera che, passando (o selezionando) la voce principale di un meno, compaiano a cascata tutte le altre voci del menu di secondo livello, come avviene nel sito della provincia di Bologna. (menu orizzontale, sopra il banner)

www.provincia.bologna.it

L'ho risolto con un pezzo di codice simile

ul li ul {display:none;}
ul:hover li ul,
ul:focus li ul,
ul:active li ul {display:block;}

e funziona su tutti i dispositivi (compresi vari tablet) tranne su iPAD

Ho cercato su internet, ma non ho trovato niente di utile. Ho provato a scrivere un pezzo di codice javascript che, utilizzando l'onclick, forzi il display block, ma anche in questo caso funziona su tutti i dispositivi tranne iPAD.

Suggerimenti su come possa risolvere il problema su questo dispositivo?

(la cosa brutta è che non ho un iPAD per fare delle prove)

[Prill]

i vari stati dovresti impostarli sulle voci elenco, e non su ul

[Reiuky]

i vari stati dovresti impostarli sulle voci elenco, e non su ul

Non ho capito... vuoi dire che devo mettere l'onclick sulla voce principale e poi nascondere, una per una, tutte le voci secondarie?

Ma come mai? l'iPAD non capisce il click su UL?

[Prill]

voce1 voce2 voce3

immaginiamo di avere questo menu, a ogni voce corrisponde un sottomenu
se uso ul:hover li ul, al passaggio del mouse sull'elenco dovrebbero essere visualizzati in teoria tutti i sottomenu
se uso ul li:hover ul, al passaggio del mouse mi si apre il menu corrispondente alla voce su cui mi trovo

Come criterio generale. Poi se questo influisca sulla visualizzazione dell'IPad non lo so

[Reiuky]

La struttura è (provo a indentarla con gli spazi, spero si capisca)

<ul>
	<li>
		<strong>MENU1</strong>
	</li>
	<li>
		<ul>
			<li>
				<a>submeni1</a>
			</li>
			<li>
				<a>submeni2</a>
			</li>
			<li>
				<a>submeni3</a>
			</li>
		</ul>
	</li>
</ul>


<ul>
	<li>
		<strong>MENU2</strong>
	</li>
	<li>
		<ul>
			<li>
				<a>submeni1</a>
			</li>
			<li>
				<a>submeni2</a>
			</li>
			<li>
				<a>submeni3</a>
			</li>
		</ul>
	</li>
</ul>

Sistemati con i css in modo che si veda
MENU 1 MENU 2 MENU 3

e il secondo ul nascosto. Poi quando passi con il mouse sopra il primo ul, faccio vedere tutte le sottovoci cambiando l'impostazione display del secondo ul.

non posso neanche cambiare il codice html generato, altrimenti incasino tutto il sito. Devo trovare una soluzione funzionante con il css. Come ho detto, la soluzione di sopra funziona su tutti i dispositivi tranne iPAD

Considera che ho sufficienti classi per puntare ogni elemento singolarmente.