基于触摸的设备的下拉菜单 [英] Drop-down menu on touch based devices

问题描述

我在我的网站上有这个导航栏，它不会下降在我的iPod touch，我怀疑同样的iPhone和iPad。
这是其中一个页面

I have this navigation bar on my website and it doesn't drop down on my iPod touch, I suspect the same for iPhones and iPads. This is one of the pages

我想知道是否有任何快速修复来启用触摸/悬停。

I was wondering if there is any quick fix to enable the touch/hover.

CSS

推荐答案

如果您对iDevices感兴趣， p>

If you are interested in iDevices, then you can use this trick:

#nav ul {
display: none;
/* Your styles */
}
#nav > li:hover ul {
display: block;
}
/* This is important */
#nav > li > a:hover {
color: #fff; /* You can set the same color or add other style.*/
}

一个元素具有：hover 事件，那么第一个点击iOS渲染：hover ，第二个点击引发点击事件。

If an element has the :hover event then the first tap iOS renders :hover and the second tap raises the click event.

这应该可以工作。

PS最好为移动，触摸和桌面制作不同的UI逻辑。

P.S. It's better to make different UI logic for mobile, touch and desktop.

这篇关于基于触摸的设备的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！