悬停事件转换为点击移动设备，除了iPhone / Safari?

Question

我对此有点困惑，但我想我已经找到了问题。

我在我的 html 中有：

<div class="dropdownz">
<button>HOVER_OR_CLICK</button>
<div class="dropdownz-content">
<a href=""></a>
<a href=""></a>
</div>
</div>

在我的 css 中，我有：

.dropdownz {
float: left;
overflow: hidden;
}
.dropdownz-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdownz:hover .dropdownz-content {
display: block;
position: fixed;
top: 50px;
}

所以这基本上意味着如果我将鼠标悬停在dropdownz类上，dropdownz-content显示将从none转换为block，并显示菜单项。

当我在 android 触摸屏移动设备上运行它时，我必须单击dropdownz项才能使其影响hover并显示列表，如果我再次单击它，它会有效地删除悬停。

这是理想的行为，这意味着我不必为触摸屏做任何额外的事情。"悬停"变为单击，第二次单击将删除"悬停"。伟大！

显然，这在iPhone上的SAFARI中的工作方式不同。我自己无法测试，我是通过一个朋友说它不起作用，所以我基本上想知道：

这是一个已知问题吗，修复它的最佳方法是什么？(当然没有JavaScript！(

我正在按照:focus思路思考？

Answer 1

试试这个：

.dropdownz:hover .dropdownz-content,
.dropdownz:active .dropdownz-content,
.dropdownz:focus .dropdownz-content{
display: block;
position: fixed;
top: 50px;
}