悬停触摸设备 [英] Hover for Touch Devices

问题描述

我使用以下众所周知的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

http://www.rene-grothmann.de/musica-aliter-test/

感谢。

推荐答案

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

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.

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