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

我在这里做了一点: http://jsfiddle.net/NuTz4/