懸停的CSS動態導航 - 如何讓它在iOS Safari中工作？

Question

在我的網站中，我使用僅CSS的動態菜單。這在桌面瀏覽器中很好，但不適用於iOS（iphone，ipad等），因爲觸摸界面不支持:hover選擇器。

我的問題是：在iOS上支持這種方式的最佳方式是什麼？ （理想情況下或者通過與一些CSS或JavaScript，這將使現有的代碼工作的修補，而不是做整個事情經過短短支持iOS版）

我的HTML看起來像這樣

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

而CSS這篇

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

我已經這樣做了這裏的的jsfiddle：http://jsfiddle.net/NuTz4/

Answer 1

檢查這篇文章，也許這是你的解決方案;）

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

此外JS溶液，取自：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); 
} 

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