My CSS-only dropdown menu works perfectly on desktop, but on mobile Safari on an iPad, when a top-level navigation link is clicked, the dropdown menu briefly appears before the user is taken to a new page.
I've researched extensively and found that iPads are supposed to treat the first tap as a hover due to the :hover style affecting the display property of the submenu. This should prevent the link from being followed on the first tap.
Other websites demonstrate this behavior correctly, as does other parts of my website, but for some reason, it doesn't work properly with my CSS dropdown menu.
You can view the problematic menu on my site, . On an iPad, tapping on a menu item like "Surfboard" immediately navigates to the Surfboard page rather than displaying the dropdown menu. Occasionally, the dropdown displays as expected without navigating, but this is rare and inconsistent.
Below is the relevant markup for the menu:
HTML
<ul class="mainNav-menu">
<li>
<a href="/sup-racks-bags/">SUP</a>
<div class="mainNav-submenu">
<ul class="mainNav-submenu-menu">
<!-- Submenu items here -->
</ul>
</div>
</li>
<li>
<a href="/surfboard-racks-bags/">Surfboard</a>
<div class="mainNav-submenu">
<ul class="mainNav-submenu-menu">
<!-- Submenu items here -->
</ul>
</div>
</li>
</ul>
CSS
.mainNav-submenu {
display: none;
position: absolute;
left: 0;
right: 0;
top: auto;
background-color: #8a8a8a;
z-index: 20;
padding: 1rem;
}
.mainNav-menu > li:hover .mainNav-submenu {
display: block;
}
Various posts suggest adding onclick="return true" to fix the issue, but this didn't work for me. I'm also using fastclick.js, which I thought might be causing the problem, but removing it had no effect.
I tested a solution mentioned in this article, which worked correctly. Tapping showed a message, and a second tap navigated away.
The same behavior doesn't kick in for my navigation menu. Unsure if it's due to how it's marked up or styled. Any ideas on what might be wrong? Any suggestions would be appreciated.
UPDATE
Following Doc's answer below, I applied this solution:
.mainNav-menu > li > a {
pointer-events: none;
}
.mainNav-menu > li:hover > a {
pointer-events: all;
}
The fix is live on the site now. Still unclear why it was necessary and why it failed originally. Any insights are welcome.