How do i fix :hover on iPhone if there is no <a> element?

Question

How do i fix :hover on iPhone if there is no <a> element?

I'm using a <li> element and the iPhone doesn't open my sub-menu when i tab it.

Example html:

<ul>
  <li>Menu item (no <a> element)
    <ul>
      <li><a href="#">Menu item</a><li>
    </ul>
  <li>
</ul>

I answered a JavaScript way to fix this, but i want to know if there are different ways to fix this (maybe a better one)

Answer 1

You can fix this by using JavaScript. The following script will add hover as class to the <li> element:

<script type="text/javascript">
$("li").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);  
</script>

Just add li.hover where you got li:hover in your CSS like this:

This:

ul li:hover ul{
    display:block;
}

Will be:

ul li:hover ul,
ul li.hover ul,{
    display:block;
}

jQuery Documentation:
http://api.jquery.com/hover/
http://api.jquery.com/addClass/