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.