Question

I’m attempting to make a drop down navigation menu with some CSS3 transitions. However, when using visibility hidden/visible, iOS doesn’t display the drop down (it just goes to the link). If I use display none/block, iOS will display the drop down menu on the first click of the parent element, but the transitions don’t work in any browsers.

Is there a way to get these transitions to function correctly in browsers and the drop-downs to work in iOS without using javascript?

Drop down doesn’t work in iOS:

nav ul li ul {
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }

Transitions don’t work in browsers:

nav ul li ul {
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }

Answer 1

After thinking about this some more I found documentation that I hadn’t seen before — some of the weirdness you’re experiencing might be because you are attaching behavior to a pseudo-element on something that isn’t interactive by default (only anchors and form elements are clickable).

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

(Ignore my original comment about event.preventDefault…I forgot you were working with list items instead of anchors.)

I do, however, still think JS is the best approach since you can be very specific about events attached to any kind of element. You can just apply a CSS class and it will use the transition properties you already specified.

Like this:

// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }

// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
    $(this).children('ul').toggleClass('visible');
});

If you want to be extra awesome you could make it keyboard accessible by adding tabIndex="0" to the list items 🙂