Question

I have a css powered drop down menu which doesn’t work properly on the iphone or ipad.

It works as I want it to on all other browsers and devices I’ve checked.

I’ve narrowed it down to the fact that I don’t have the menu text (eg the word ‘face’) wrapped in href tags, like it does in the original version of the code. Thats what makes the difference. Wrap href tags around the word face and the drop down works OK on ipad/iphone

Obviously I could just add the href and be done but I really don’t want to have to, otherwise everyone with a touch-screen, who would normally have to tap the menu text to get the dropdown to appear, will be taken to wherever the link points. Spoiling the whole point of the dropdown in the first place!

Here’s the code:

<div id="dropMenuWrapper">
  <div id="dropMenu">
        <ul class="level1">
        <li class="submenu">Face
            <ul class="level2">
                <li class="subCatodd"><a href="">powder</a></li>
                <li class="subCateven"><a href="">cream</a></li>
            </ul>
        </li>
    </ul>
  </div>
</div>

The the css:

body {  behavior: url(includes/csshover.htc);}
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


#dropMenuWrapper {
width:100%;
height:25px;
margin:0;
font-size:11px;
}

div#dropMenu {
width:750px;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0; 
padding: 0;
}

div#dropMenu li {
position: relative; 
list-style: none; 
margin: 0; 
float: left; 
line-height: 1em;
}

div#dropMenu ul.level1 {
width:750px; 
margin:0 auto; 
text-align:center;
background:#4F4F4F;
height:25px;
z-index:1000;
}

div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block;text-decoration: none;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

And for ease a jsfiddle: http://jsfiddle.net/VvT6Y/1/

Can anyone point out a way to get the dropdown working on iphone/ipad without having to make the text a link?

Thanks in advance 🙂

Answer 1

Have you tried adding the :active and/or :focus pseudo-class to every instance that uses :hover?

So, for example, li.submenu:hover becomes li.submenu:hover, li.submenu:active.

The :active pseudo-class is typically used when an element is “activated by the user.” The most common example is the point on a link when the user has started the click action of a link (the “mousedown” event), but hasn’t yet finished the action (the “mouseup” event).

The :focus pseudo-class is used when an element has the focus (can accept input). This is most obvious with form controls, but it’s actually used far more often (ever see the little dotted border around links, especially if you tab through a form? That’s :focus).

(W3C info on both.)

I mention both, because I’m not 100% sure which one iOS Safari would use in such an instance. I would assume :focus, but I’ve seen weirder things from browsers.

(On a side note, you shouldn’t need div#dropMenu. IDs are supposed to be unique, so simply #dropMenu is plenty. If your ID is not unique on your page, you’re using IDs wrong.)

Edit If the pseudo-classes don’t work, then the only way you’ll be able to handle it, currently, is with JavaScript, unfortunately. Thankfully, it’s as simple as:

var is_touch_device = 'ontouchstart' in document.documentElement;

to detect the capability, which you can then use to trigger certain behaviors (add classes, etc) to emulate the effect. If you happen to already be using Modernizr, then you can use it’s Modernizr.touch function to detect touchscreens.