CSS3下拉菜单&；iOS问题

我正在尝试制作一个带有一些CSS3转换的下拉导航菜单。但是，当使用visibility hidden/visible时，iOS不显示下拉列表（它只显示链接）。如果使用display none/block，iOS将在第一次单击父元素时显示下拉菜单，但转换在任何浏览器中都不起作用

有没有办法让这些转换在浏览器中正常运行，让下拉列表在iOS中正常工作而不使用javascript

下拉列表在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; }

转换在浏览器中不起作用：

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; }

---

在进一步思考这个问题之后，我发现了我以前从未见过的文档——您所经历的一些奇怪可能是因为您将行为附加到了默认情况下不交互的东西上的伪元素（只有锚和表单元素是可单击的）

（忽略我对event.preventDefault的原始评论…我忘了您使用的是列表项而不是锚定。）

但是，我仍然认为JS是最好的方法，因为您可以非常具体地描述附加到任何类型元素的事件。您可以只应用一个CSS类，它将使用您已经指定的转换属性

像这样：

// 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');
});

---

如果你想变得特别棒，你可以通过在列表项中添加

tabIndex=“0”

来访问键盘：）

我找到了一个解决方案。本质上，对于显示：阻止/无或可见性：隐藏/可见的任何内容，ios都不会将单击绑定到悬停。所以你只需要用“左”来“隐藏”下拉列表，以弥补iOS带来的不足。你是说移动Safari吗？为什么你试图依靠：悬停触摸设备（这是不可预测的）？我知道您不想使用JS，但它允许您更精确地处理事件。在我看来，您应该使用Javascript单击事件来显示和隐藏内容，并使用event.preventDefault（）抑制链接操作；

nav ul li ul {
    position: absolute; opacity: 0; left: -888em; 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 {opacity: 1; top: 40px; left:0;}