Search code examples
iphonecssmenuipad-2

Why are my menu items not opening on an iPad,iPhone or iTab?

If you try to navigate on my website(http://www.shjlib.gov.ae/en) with an iPad,iPhone or iTab you will notice that the horizontal menu doesn't react at all. Can someone suggest a solution?

Example:-

<li id="menu-item-173" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-173"><a>Sharjah Library</a>
<ul class="sub-menu">
    <li id="menu-item-486" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-486"><a href="http://www.shjlib.gov.ae/en/?page_id=484">The Library`s Vision &#038; Objectives</a></li>
    </ul>
</li>
Solution

  • Your menu items (li) open the sub-menu lists with :hover.

    Since those devices are touch screen, you have no mouse *hover*ing your list items...

    So you must change your site behaviour for the sub-menus to open on touch, or something like that.