iPad/iPhone Touch Event on Hover CSS

Question

I have a simple menu set up like this:

  <ul>
   <li>Item </li>
   <li>Item </li>
    <li>Item </li>
  </ul>

When you hover over the item on the computer it shows the other <ul> and <li> items fine. On the i-devices, if you touch the item, it does not do anything. My very first <li> that has an image called iconic works perfect, but I cannot figure out why that works and the others do not.

http://jsfiddle.net/5v9nc/

Thank you for your help.

I tried this:

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

But it did not help. Please help! I have tried the suggestions below but it does not work for my fiddle example.

Answer 1

I found out how. Add

<a href='#'>(your menu header)</a>

to all of the <li> in the parent <ul>. No jQuery/JS required.

Answer 2

I had the same problem and after looking at your solution I tried something absurdly simple that has worked, so I thought I'd share it.

To restate the problem, I have CSS menus where hover-ing over a menu item reveals the sub-menu items. On the iPad which has no hover, clicking on the menu item reveals the sub-menu in some cases and not in others.

Wherever it doesn't work, I just add onclick="return true" to the <li>, and hey presto it works.