jQuery / CSS菜单不会在iPad上的固定div上浮动

Question

我一直在一个网站上工作，该网站的顶部固定有一个固定的div，下面有一个固定的下拉菜单。 如果将鼠标悬停在IE或FF中的“住宿地点”上，则可以完美运行，但在ipad上查看时，菜单子项会显示在固定的div下方。 我已经尝试过各种z-index，但是我无法使其在ipad上正常运行。

谁能帮我？

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

http://jsfiddle.net/LBv8f/

忽略这一点。 因此，我不会只发布指向jsf的链接，而是在此处发布太多代码。

$(document).ready(function ()

Answer 1

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

工作演示 （在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
}