Question

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

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

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

这适用于现代浏览器。我有IE6的javascript伪造。

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

在IPad上根本没有任何事情发生，即使我按下列表项。这可能是因为列表项不是锚。或许，我需要一个点击事件来解决这个问题。

在Android浏览器上，长按列表项会打开子菜单。但是，子菜单中没有链接可供选择。

任何人都可以帮助我吗？

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

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

感谢。

Answer 1

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

Answer 2

我认为您的列表项应该是链接。你应该至少尝试一下，如果它有用的话。>

Answer 3

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

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

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

悬停触摸设备

3 个答案: