JQuery / CSS菜单不会漂浮在ipad上的固定div上

Question

我一直在开发一个网站，它有一个固定的顶部div，里面有一个简单的下拉菜单，下面是一个固定的左边div。如果你将鼠标悬停在IE或FF中的“停留位置”，它可以很好地工作，但是当你在ipad上查看它时，菜单子项目会出现在固定的左侧div下面。我尝试了各种z-index，但我无法正确地在ipad上运行。

任何人都可以帮助我吗？

我在这里编写了一个简单的版本：

http://jsfiddle.net/LBv8f/

忽略这一点。所以不允许我发布只有jsf的链接，但是有太多的代码要发布在这里..

$(document).ready(function ()

Answer 1

您需要在#left-container之前移动#top-nav-container以补偿固定位置。

工作DEMO（在Ipad上测试）

Answer 2

没有在ipad上悬停的概念，所以显然悬停不会在iPad上运行。也就是说，您已经使用了一些位置，您可以使用ipad的媒体查询将菜单定位为iPad上的菜单。

@media (max-width:767px) {
  // css for ipad potrait mode
}


@media (max-width:979px) {
  // css for ipad landscape mode
}