1

I'm using the same menu design for iPad landscape that I'm using for Desktop, after that it turns to a mobile menu that has a link 'Menu' handle that toggles the menu open.

My problem is that when using an iPad I click on About and it shows the sub menu for a split second then goes off to the page, I need to make the sub menu show until the the user chooses a link with a double tap or something.

I'm using the following CSS to display the children when hovered:

#main ul li:hover > ul {display:block;} 

The menu HTML set up is as below:

<div id="navBar">

<!--st MOBILE menu handle-->
<div class="menuHandleCn"><a href="#" class="menuHandle">Menu</a></div>
<!--end MOBILE menu handle-->

<nav role="mainMenu" id="main">
    <ul class="menu levelOne">
        <li class="home"><a href="index.html" class="active">Home</a></li>
        <li><a href="internal.html">About</a>
            <ul>
            <li><a href="internal.html">The Studio</a></li>
            <li><a href="internal.html">Studio Schools</a>
                <ul>
                <li><a href="#">Sub Sub 01</a></li>
                <li><a href="#">Sub Sub 02</a></li>
                <li><a href="#">Sub Sub 03</a></li>
                </ul>
            </li>
            <li><a href="news.html">Latest News</a></li>
            <li><a href="internal.html">Our Ethos</a></li>
            </ul>
      </li>
      <li><a href="internal.html">Apply</a></li>
      <li><a href="internal.html">Curriculum</a></li>
      <li><a href="internal.html">Multi-Academy Trust</a></li>
    <li><a href="internal.html">Building</a></li>
        <li><a href="internal.html">Contact</a></li>
    </ul>
</nav>

</div>

I do have the Modernizer script loaded for your information.

Thanks for any help. G

5
  • Hover is not supposed to be used on ipad and tablets as it is property of mouse events Dec 22, 2013 at 10:48
  • The :hover state is only active while the element is pressed on touchscreens.
    – pstenstrm
    Dec 22, 2013 at 10:49
  • Check this stackoverflow.com/questions/2851663/… Dec 22, 2013 at 10:52
  • Use :active instead in touch screens.
    – user1902830
    Dec 22, 2013 at 12:08
  • how can I get around the problem that as soon as I touch the About link which has the sub menu under it goes straight to the page, I'd like to be able to touch the top level menus and have the sub menu show, then have a double tap or whatever to go to the pages.
    – Geoff
    Dec 22, 2013 at 15:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.