Menus can be slightly confusing since there’s often JS and CSS interacting with different things.
Looking at the twentytwelve theme, a quick method of achieving this would be to remove the CSS that is adding :hover display of the submenus.
In style.css you would see .main-navigation ul li:hover > ul, on line 1,567.
In your child theme, you could just remove that selector and keep the other two selectors and all the properties in tact.
That disables the :hover, but then you also need to make decisions on the behavior of the menu, submenus, and submenu submenus etc.
Do you expect the submenus with submenus to behave the same way?
Are you going to disable the top level menu item that is nested underneath?
Are you going to create a toggle next to the menu item and keep the link clickable on the parent?
Maybe a single click opens the submenu, and doubleclick takes the user to the URL?
Paired with removing the CSS from above, you could have the parent menu item simply be a custom link going to ‘#’ and the link text whatever you want the parent item to be.
Twentytwelve already includes JS in the js/navigation.js file, which is handling toggling a focus class on the element, so everything should work for you just removing that one line of CSS and changing your menu structure up.
If this is for your own site or a controlled environment, then that might be all you need. If you don’t want to change the menu structure, or want an alternative solution to handling that, you could easily use JS to prevent the links from being followed on click as well. This code would allow that to happen and you wouldn’t have to mess around with your menu structure:
( function( $ ) {
$( '#menu-primary' ).find( '.menu-item-has-children > a' ).on( 'click', function( e ) {
e.preventDefault();
});
} )( jQuery );
If you’re creating a new theme based on twentytwelve, then you should also give consideration to how others might intend to use the theme and prefer for their menus to work. You could create customizer controls to allow toggling the behavior of hover vs click and allowing parent menu items to be links etc.
EDIT:
How would your JS affect users who don’t use mice though?
The best way to tell is to try it out! 😛
- Keyboard navigation:
In testing this solution without a mouse by using my keyboard, I am able to successfully tab through the menus, submenus, and nested submenus easily. Pressing enter did not take me to the links of items that had children, but pressing enter on the final child allows the link to be opened. This seems like it works in the way that I would expect the navigation to work from a keyboard from the op’s question. It probably wouldn’t be harmful to rewrite the nav with aria labels to provide a better experience for users on screen readers, and allow better handling of the navigation with arrow keys if that’s a concern for your site.
- Mobile or Touch Devices:
The click event would be the last fired for a touch click simulation. The flow through events for touch would be:
- touchstart
- touchmove
- touchend
- mouseover
- mousemove
- mousedown
- mouseup
- click
Twentytwelve is already handling the mobile menus on the touchstart event in their navigation.js, so calling preventDefault on click should still be fine to have it behave as well on mobile.