0

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'.

Darvanen
  • 626
  • 1
  • 9
  • 19
  • i think drupal`s css theme adds some default styles to all ul li elements. you need to check it and set to default in .nav ... – Artem Gorlachev Sep 06 '13 at 06:18
  • Thanks, can you give me some clue regarding the setting that controls hover behaviour on mobile phones? – Darvanen Sep 08 '13 at 23:42
  • I couldn't find anything on the CSS side of things - but you're right about there being differences. My drupal page has a bunch of event listeners, guess I'll have to get into the javascript after all /sigh – Darvanen Sep 09 '13 at 00:08
  • i think theres no hover state on mobile devices because it like mouseover. you need to make another css class and set it to ul by click. jQuery - $(".nav").click(function(){ $(this).addClass(".hovered");}); and duplicate this classes in css: .nav ul:hover to .hovered; .nav ul:hover li to .hovered li; .nav ul:hover .current to .hovered .current – Artem Gorlachev Sep 09 '13 at 05:34
  • Thanks Artem, I might end up implementing a third party script, this is starting to go over my head =) Appreciate the input. – Darvanen Sep 24 '13 at 05:40

1 Answers1

0

For the record, I got the menu working using Flexnav.

Darvanen
  • 626
  • 1
  • 9
  • 19