Disable Anchor Menu Click On Mobile Devices

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 t

Solution 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)