1

I've found this site which has a sub-menu that works fine on my iPhone/Pad and I’m curious how they made the li:hover ul{ work for a touch screen?

I've looked through the entire HTML, CSS, JS and nothing stands out so if someone cluey can have a peak I’d be very interested in what they find.

drudge
  • 35,471
  • 7
  • 34
  • 45
Bert
  • 11
  • 1
  • 3

3 Answers3

3

I had the same problem with my school website (www.harveygs.kent.sch.uk) but the Servicepoint site gave me the answer - simply add "<a href='#'>(your menu header)</a>" after the first <ul> in your menus.

Bill
  • 31
  • 1
1

You can't make :hover work on a mobile device. The menu is showing on click events AND hover events. I'm not certain how this site is doing the click events, but you can either do it with JavaScript or with the a:active CSS selector

  • Yeah, I’ve seen a few answers to how it _can_ be done, but im very curious as to how that site is doing it.. There doesn’t appear to be anything that initiates it and now it’s like a riddle that is driving me crazy. – Bert Apr 12 '11 at 03:24
0

If it's an element that can gain focus, then the hover CSS should work ok on a touch screen - those "menu" items are also links, so they react to the hover event when they gain focus by being touched. You should be able to do this with amy element that can similarly gain focus (I'm doing it with a link without an HREF attribute) to activate the hover event when the mouse passed over it, or the object is touched on a touchscreen.

Mad Halfling
  • 968
  • 3
  • 19
  • 36
  • According to Quirksmode, virtually all touchscreen browsers match :hover when any element is tapped, and Blackberry is the only one which would specifically require a link like you describe: http://www.quirksmode.org/mobile/tableTouch.html – Craig Timpany Sep 05 '13 at 11:45