jquery - Typical CSS menu dropdown hover issue with iPad -

We are having a common problem with iPad users and CSS menus. Because this hover does not recognize states because it does not allow a selection.

We use a variety of common solutions such as onClick = "return true" and jQuery to replicate a dynamic hover class: hover and something else, which I Just removed a bit to clean the code. I'm sure we are missing something which should be clear.

Any help to point me in the right direction will be greatly appreciated.

Link: iar.suissamesser.com

I think that you Talking about, right? In this case, what I do, my CSS adds the : hover second selector to the selector, this idea adds a code like "code", #nav, such as' Btn1 . You will also need to add a class to your list item for this.
css

  # nav li: hover & gt; UL, # nav.btn1 li.btn1> Ul {display: block; }   
 HTML  
  & lt; Ul class = "clearfix btn1" id = "nav" & gt; & Lt; Li class = "btn 1" & gt; & Lt; A href = "http://iar.suissamesser.com/about-us/campus" & gt; About the US & lt; / A & gt; & Lt; Br / & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://iar.suissamesser.com/about-us/campus" & gt; Campus & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "http://iar.suissamesser.com/about-us/history-mission" & gt; History & amp; Amp; Mission & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "btn2" & gt; & Lt; A href = "http://iar.suissamesser.com/parents/accreditation-and-licenses" & gt; Parents & lt; / A & gt; & Lt; Br / & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "http://iar.suissamesser.com/parents/accreditation-and-licenses" & gt; Accreditation and License & lt; / A & gt; & Lt; / Li & gt;   
 JS  
  $ ("# nav> li> an"). ("Click", toggle nav); Var toggleNav = function (evt) {var click = $ (this). Parent (). Attr ('class'); $ ("#nava"). RemoveClass ("BTN1BTN2BTN3BTN4 ..."). AdaClass (click); Evt.preventDefault (); }