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
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 & 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();
}