Điều hướng động CSS bằng Hover - Làm cách nào để nó hoạt động trong iOS Safari?

Question

Trong trang web của tôi, tôi chỉ sử dụng menu động CSS. Điều này là tốt trong các trình duyệt máy tính để bàn, nhưng không phải trên iOS (iphone, ipad, vv) vì giao diện cảm ứng không hỗ trợ bộ chọn :hover.

Câu hỏi của tôi là: cách tốt nhất để hỗ trợ tính năng này trên iOS là gì? (Lý tưởng nhất là bằng cách vá với một số CSS hoặc Javascript mà sẽ làm cho công việc mã hiện tại, chứ không phải là làm toàn bộ điều trên chỉ để hỗ trợ iOS)

html của tôi trông như thế này

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

Và CSS được này

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

tôi đã làm một jsfiddle điều này ở đây: http://jsfiddle.net/NuTz4/

Answer 1

Kiểm tra bài viết này, có lẽ đó là một giải pháp cho bạn;)

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

Ngoài ra giải pháp JS, lấy từ: 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); 
} 

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