CSS Dynamic Navigation with Hover - ¿Cómo puedo hacer que funcione en iOS Safari?

Question

En mi sitio utilizo un menú dinámico CSS solamente. Esto está bien en los navegadores de escritorio, pero no en iOS (iphone, ipad, etc.) porque la interfaz táctil no admite el selector :hover.

Mi pregunta es: ¿cuál es la mejor manera de apoyar esto en iOS? (Lo ideal sería que, ya sea por parcheo con un poco de CSS o Javascript que hará que el trabajo de código existente, en lugar de hacer todo esto otra vez sólo para apoyar IOS)

Mi html se ve así

<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> ​​​​​ 

Y el CSS está presente

#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; 
} 

me han hecho un jsFiddle de esta aquí: http://jsfiddle.net/NuTz4/

Answer 1

Comprobar este artículo, tal vez es una solución para usted;)

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

También solución JS, tomado de: 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); 
} 

En 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 */ }