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

hover, html, iphone, javascript

Solution

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/

Problem

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)

Original source