Typical CSS menu dropdown hover issue with iPad

Question

We're having a common issue with hover states and CSS menus on the iPad. Because it doesn't recognize hover states it's not allowing a selection.

We've tried most of the common workarounds like onClick="return true" and using jQuery to create a dynamic hover class to replicate :hover and a few others, which I've removed now to clean the code a bit. I'm sure we're missing something that should be obvious.

Any help pointing me in the right direction on this would be greatly appreciated.

Link: iar.suissamesser.com

Solution 1

I assume you are talking about the menu, correct? What I do in this case, is add another line to my css :hover selector. The idea is this, on click, add a class to the #nav like 'btn1. This would also require you to add a class to your list-items.
CSS

#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
    display: block;
}

HTML

<ul class="clearfix btn1" id="nav">
  <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
      <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li>
    </ul>
  </li>
  <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

JS

$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
  var clicked = $(this).parent().attr('class');
  $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
  evt.preventDefault();
}

Solution 2

You should look at the example here http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

It's pretty straight forward from there. Good Luck,