悬停触摸设备

我使用以下着名的CSS代码来获取网页上的下拉菜单。悬停触摸设备

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

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

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

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

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

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

任何人都可以帮助我吗？

在情况下，你需要详细资料（并有时间），看看

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

感谢。

来源

2011-08-09 Rene

我会建议考虑使用一些Javascript和显示菜单触摸。悬停菜单在触摸设备上使用时不必要的困难。 –

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

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

不应该有与悬停状态的问题。应该在任何设备上正常工作。以免它对我有用。

来源

2011-08-09 17:18:04 Hyperpedro

是的，没关系，但是我想知道一个更标准的方法，但是为了获得正确的行为，必须将列表项链接起来听起来很奇怪。如果我发现，我在这里张贴。谢谢。 – Rene

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

来源

2011-08-09 15:54:55

这不起作用。在桌面上，菜单不能再使用，而在Android上，活动状态确实是奇怪的事情，但不能打开菜单。 – Rene

它不能在桌面上工作，我相信你需要添加媒体查询，然后定位触摸设备。它不会打开菜单，因为'：active'只在人的手指触及'ul'时才起作用。我认为你最好的选择是使用JavaScript将'display'改为'display：block;'。 –

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

来源

2011-08-09 16:02:16 Hyperpedro

是的，我试过了。它适用于Android。我无法在iPad上测试，因为我现在没有任何权利:-(但在Android上，我不喜欢该解决方案，因为它会重新加载整个页面（打开菜单）并将其放回到左上角。菜单确实保持打开状态，准备好点击了。 – Rene

悬停触摸设备

回答

相关问题