带悬停的 CSS 动态导航 - 如何使其在 iOS Safari 中工作？

在我的网站中，我使用纯 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/ http://jsfiddle.net/NuTz4/

查看这篇文章，也许它是您的解决方案；）

http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/ 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/ 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 */ }