Navigazione dinamica CSS con passaggio del mouse - Come posso farlo funzionare su iOS Safari?

Question

Nel mio sito utilizzo un menu dinamico solo CSS. Questo va bene nei browser desktop, ma non su iOS (iphone, ipad, ecc.) Perché l'interfaccia touch non supporta il selettore :hover.

La mia domanda è: qual è il modo migliore per supportarlo su iOS? (Idealmente sia per l'applicazione di patch con un po 'di CSS o JavaScript che farà il lavoro codice esistente, piuttosto che fare il tutto sopra solo per sostenere iOS)

mio html assomiglia a questo

<ul id="nav"> 
    <li> 
    Item 1 
    <ul> 
     <li><a href=''>sub nav 1.1</a></li> 
     <li><a href=''>sub nav 1.2</a></li> 
    </ul> 
    </li> 
    <li> 
    Item 2 
    <ul> 
     <li><a href=''>sub nav 2.1</a></li> 
     <li><a href=''>sub nav 2.2</a></li> 
    </ul> 
    </li> 
    <li> 
    Item 3 
    <ul> 
     <li><a href=''>sub nav 3.1</a></li> 
     <li><a href=''>sub nav 3.2</a></li> 
    </ul> 
    </li> 
</ul> ​​​​​ 

E il CSS è questo

#nav li { 
    float:left; 
    padding:0 15px; 
} 

#nav li ul { 
    position: absolute; 
    width: 10em; 
    left: -999em; 
    margin-left: -10px; 
} 

#nav li:hover ul { 
    left: auto; 
} 

ho fatto un jsfiddle di questo qui: http://jsfiddle.net/NuTz4/

Answer 1

Controllare questo articolo, forse è una soluzione per voi;)

http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

Inoltre soluzione JS, tratto da: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

var nav = document.getElementById('nav'); 
var els= nav.getElementsByTagName('li'); 
for(var i = 0; i < els.length; i++){ 
    els[i].addEventListener('touchstart', function(){this.className = "hover";}, false); 
    els[i].addEventListener('touchend', function(){this.className = "";}, false); 
} 

In jQuery:

$('#nav li').bind('touchstart', function(){ 
    $(this).addClass('hover'); 
}).bind('touchend', function(){ 
    $(this).removeClass('hover'); 
}); 

css:

li:hover, li.hover { /* whatever your hover effect is */ }