悬停触摸设备

本文介绍了悬停触摸设备的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用以下众所周知的CSS代码来获取网页上的下拉菜单。

I am using the following well-known CSS code to get a drop down menu on a web page.

div#menu ul ul {
    display: none;
}
div#menu ul li:hover ul {
    display: block;
}

菜单是包含另一个u列表的u列表。当鼠标悬停在此菜单中的列表项上时，第二个u列表变为可见。列表项目没有链接，只是文本。

The menu is an u-list containing another u-list. When the mouse hovers over the list item in this menu, the second u-list becomes visible. The list items are no links, just text.

这在现代浏览器中可用。我有一个javascript forge for IE6。

This works in modern browsers. I have a javascript forge for IE6.

但是，它不适用于触摸设备。

However, it does not work on touch devices.

在IPad上什么都没有发生，即使我按列表项。这可能是因为列表项不是锚点。或者，我需要一个点击事件来解决这个问题。

On the IPad nothing happens at all, even if I press on the list item. This is probably, because the list item is not an anchor. Or maybe, I need a click event to fix that.

在Android浏览器上，长按列表项打开子菜单。

On the Android browser, a longer press on the list item opens the sub-menu. However, no link in the submenu can be selected.

任何人都可以帮助我吗？

Can anyone help me?

需要详细信息（有时间），请查看

In case, you need details (and have the time), look at

感谢。

推荐答案

尝试嵌套您的列表元素，如下所示：

Try nesting your list elements like this:

<ul>
    <li><a href="#">LINK</a>
        <ul>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        <li><a href="#">LINK</a></li>
        </ul>
    </li>
    <li>
    more links here, if you wish.
    </li>
</ul>

悬停状态不应出现问题。应该在任何设备上正常工作。至少这对我有用。

There should not be a problem with the hover state. Should work fine on any device. At lest that´s how it works for me.