I am building a site in Drupal 7 with a responsive theme based on Zen 7.x-5.x. I have successfully styled the small screen menu using media queries based on the instructions here:
Instructions: http://webdesignerwall.com/tutorials/css-responsive-navigation-menu
Demo: http://webdesignerwall.com/demo/responsive-menu/
The only problem I have now is that ul:hover{} which works for that site in the demo does not work on my Drupal site. When I access the site via a mobile device, tapping the menu does indeed expand it, but it also selects the first item immediately.
I have a feeling this is because they're using the tag to enclose their instead of , but I'm not sure if I can change that in the theme.
How should I handle this? Preferably without using javascript, but I'm happy to listen if the feedback is overwhelmingly 'use javascript'.
For the record, I got the menu working using Flexnav.