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

codice:
<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.