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

Geoff
  • 199
  • 2
  • 12
  • Hover is not supposed to be used on ipad and tablets as it is property of mouse events – Raunak Kathuria Dec 22 '13 at 10:48
  • The `:hover` state is only active while the element is pressed on touchscreens. – pstenstrm Dec 22 '13 at 10:49
  • Check this http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers – Raunak Kathuria Dec 22 '13 at 10:52
  • Use :active instead in touch screens. –  Dec 22 '13 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 '13 at 15:57

0 Answers0