触摸设备的悬停

发布于 2024-11-28 16:58:24 字数 607 浏览 1 评论 0原文

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

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

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

这适用于现代浏览器。我有一个 IE6 的 javascript forge。

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

在 iPad 上，即使我按下列表项，也没有任何反应。这可能是因为列表项不是锚点。或者也许，我需要一个点击事件来解决这个问题。

在 Android 浏览器上，长按列表项可打开子菜单。但是，无法选择子菜单中的任何链接。

谁能帮助我吗？

如果您需要详细信息（并且有时间），请查看

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

谢谢。

原文

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

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.

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

However, it does not work on touch devices.

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.

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/

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心如狂蝶 2024-12-05 16:58:24

div#menu ul li:hover ul 需要变为 div#menu ul li:active ul 才能在触摸设备上响应，因为它们不支持悬停状态。

回复收藏 0 原文

情深缘浅 2024-12-05 16:58:24

尝试像这样嵌套列表元素：

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

悬停状态不应该有问题。应该在任何设备上都能正常工作。至少这对我来说是这样的。

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.

回复收藏 0 原文