禁用锚菜单点击移动设备

Question

I'm using a nested list as a menu with sub menu items. I used to do it where if you hovered over main menu item, the sub menu items would appear by changing the display from none to block. I decided to make the sub menus looks as if they were dropping down and used CSS transitions.

The problem I have is that in the first approach if you touched a main menu item on an iPad the sub menu would display and you would touch it again to follow the link. With the new approach it follows the link on the iPad and you don't get to see the sub menu.

The menus that have nothing below them (sub menu items and main menu items with no sub menu items) have one class while the main menu items with a sub menu below them have a different class.

Is there any way I can set it so that hovering over the menu would show the sub menu items on a desktop and clicking would follow the link while touching a main menu item on an iPad would follow the link if there was no sub menu items but follow the link on a second touch and show the sub menu on the first touch when there is a sub menu?

    <div id="menu">
    <div class="mainmenu">
         <ul>
            <li class='menu_child'>
                <a href=''>Home</a>
            </li>
            <li class='menu_child'>
                <a href=''>Blog</a>
            </li>
            <li class='menu_parent'>
                <a href=''>Contact Us</a>
                <ul>
                    <li>
                        <a href='' >Find Us</a>
                </li>
                <li>
                    <a href='' >About Us</a>
                </li>
                <li>
                    <a href='' >Meet the Team</a>
                </li>
            </ul>
        </li>
        <li class='menu_parent'>
            <a href=''  >Adventure</a>
            <ul>
                <li>
                    <a href='' >Adventurer Grandmaster</a>
                </li>
            </ul>
        </li>
        <li class='menu_child'>
            <a href='' >Guilds</a>
        </li>
        <li class='menu_parent'>
            <a href='' >Trade</a>
            <ul>
                <li>
                    <a href='' >Moonsea</a>
                </li>
                <li>
                    <a href='' >Hillsfar</a>
                </li>
                <li>
                    <a href='' >Femphrey</a>
                </li>
                <li>
                    <a href='' >Anvil</a>
                </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

First approach

    .mainmenu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1001;
display: none;
}

.mainmenu ul li:hover ul, .mainmenu li.over ul {
display: block;
}

Second approach

.mainmenu ul ul{
float: left;
padding: 0;
position: absolute;
text-align: left;
width: 274px;
z-index: 1001;
    height: auto;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.3s ease-in;
    -moz-transition: max-height 0.3s ease-in;
    -o-transition: max-height 0.3s ease-in;
    -ms-transition: max-height 0.3s ease-in;
    transition: max-height 0.3s ease-in;
}

.mainmenu ul li:hover ul, .mainmenu li.over ul{
max-height: 999px;
-webkit-transition-duration:1s;
    -moz-transition-duration:1s;
    -o-transition-duration:1s;
    -ms-transition-duration:1s;
    transition-duration:1s;
}

I've adding focus and active pseudo-classes to the hover bit.

I'm willing to use JavaScript but I'd rather do it with CSS, preferably without changing the HTML. I'm willing to use PHP as a last resort.

Answer 1

http://jsbin.com/cilapi/2/

The trick is to prevent a click on any .menu_parent element's first inner a anchor using CSS pointer-events: none; on mobile

@media (max-width: 768px)  { /* Small devices */

  li.menu_parent > a {    // If LI element is parent to a submenu
    pointer-events: none; // prevent it's immediate A child to follow HREF
    cursor: default;     
  }

}

:hover will still work as usual on larger screens and a click will follow a link.
On smaller @media devices - any element that is .menu_parent parent will have clicks disabled on it's > immediate a child, allowing the sub menu to open (instead of triggering the HREF follow)