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

Question

我一直在开发一个网站，该网站有一个固定的顶部div，里面有一个简单的下拉菜单，下面有一个固定的左div。如果您将鼠标悬停在IE或FF中的"住宿地点"上，它可以完美运行，但是当您在ipad上查看它时，菜单子项将显示在固定的左侧div下。我已经尝试了各种z索引，但我无法让它在ipad上正确运行。

谁能帮我？

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

http://jsfiddle.net/LBv8f/

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

$(document).ready(function ()

Answer 1

您必须在#top-nav-container之前移动#left-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
}