0

I'm using css to format ul / lis for a dropdown menu. Everything works well on Firefox & IE, but fails on iPhones (eg Safari): the MENU button isn't active.

Failing code example: http://jsfiddle.net/7jfo9x8h

<ul class="Menu">
  <li>MENU
     <ul>
     <li> <a href="foo.html">Sub 1</a> </li>
     ...
    </ul>
  </li>
</ul>

Relevant CSS:

ul.Menu li:hover>ul{ display:block; }

Apologies for the involved css shown in jsfiddle; it was copied from a site that did what I needed.

I can't figure out why the iPhone fails. (PS: I don't have one; need to ask a friend to check any mods.)

Ryan Vincent
  • 4,483
  • 7
  • 22
  • 31
murspieg
  • 144
  • 2
  • 14
  • You mean, the menu doesn't display when you tap on the menu button? - but it displays on desktop on mouseover, right? – z0r Sep 05 '15 at 02:44

1 Answers1

1

You can simulate the hover state with JavaScript. If you're using jQuery, try something like this (borrowed from this other post):

$('body').bind('touchstart', function() {});

Here's an updated demo - tested to work on Chrome on Android.

You might also need to add an :active selector to the same declarations that have :hover selectors, like in this patch:

--- <unnamed>
+++ <unnamed>
@@ -1,6 +1,7 @@
 ul.Menu ul {
     display:none;
 }
+ul.Menu li:active>ul,
 ul.Menu li:hover>ul {
     display:block;
 }
@@ -21,6 +22,8 @@
     margin:0px 10px 0px 5px;
 }
 ul.Menu a,
+ul.Menu li.dis a:active,
+ul.Menu li.sep a:active,
 ul.Menu li.dis a:hover,
 ul.Menu li.sep a:hover {
     display:block;

(etc)

Community
  • 1
  • 1
z0r
  • 8,185
  • 4
  • 64
  • 83
  • Actually your original demo is now working for me on Android too. But I think it wasn't before. I'm not sure why. – z0r Sep 05 '15 at 02:58
  • So the issue is sort of like hover != touch, at least for Chrome? I'll have my friend test it tomorrow - thanks! – murspieg Sep 05 '15 at 03:06
  • Cool. You might need to [add a `:active` CSS declaration](http://stackoverflow.com/a/17260431/320036) too. – z0r Sep 05 '15 at 03:09
  • I'm not expert at css: which of the elements in my css would need that? – murspieg Sep 05 '15 at 03:28
  • Add it to the same ones that have the `:hover` selector. – z0r Sep 05 '15 at 12:21
  • Last night realized my Q should be more specific. It's abt syntax. I think `ul.Menu li.dis a:hover, ul.Menu li.sep a:hover { stuff }` should become `ul.Menu li.dis a:hover a:active, ul.Menu li.sep a:hover a:active`. But where it's `ul.Menu li:hover>a {`, should I add another line, separated by comma: 1) `ul.Menu li:hover>a, ul.Menu li:hover li:acive>a`, or the simpler 2) `ul.Menu li:hover li:active>a`? And does `ul.Menu li:hover>a>span` become `ul.Menu li:hover li:active>a>span`? – murspieg Sep 05 '15 at 13:20
  • @murspieg You would need to duplicate the rules that use `:hover`. I've added an example to the answer. – z0r Sep 05 '15 at 13:36
  • Is this (duplicated hovers) an error in my larger css file? `..., ul.Menu a:hover a:hover img.def, ...` – murspieg Sep 05 '15 at 20:42
  • Probably. That will match nested `a` tags... Even if you do have nested `a` tags like that, I think it only makes sense to have the `:hover` selector on the last one. – z0r Sep 05 '15 at 22:36
  • Still failing on iPhone. http://jsfiddle.net/7jfo9x8h/2. Javascript's `bind('touchstart` successfully shows the submenu, but adding `:active` selectors didn't work. The submenu shows up briefly, but can't be selected. Not sure what's diff on my full site, but an iPhone test finds the menu button must be selected twice. [My orig Q is mislabeled: it's Safari, not Chrome problem, and this relates to hover selectors, not
  • items - I don't have enuf points yet to change it - perhaps resubmit Q properly stated? :( ]
    • – murspieg Sep 06 '15 at 14:00
  • Do you have iPhone to check on? - Maybe I should repost, with clearer Qs? – murspieg Sep 06 '15 at 14:37
  • I don't have one. The question could be clearer. If you can't edit it, then yes maybe repost it. Be clear about whether the demo you posted works on the phone or not. Also, see if you can debug the page on the phone. – z0r Sep 06 '15 at 15:54
  • Good advice, but I don't own one. Thanks for your great help. – murspieg Sep 06 '15 at 16:00