JQuery/CSS 菜单不会浮动在 ipad 上的固定 div 上答案

【问题标题】：JQuery/CSS Menu wont float over fixed div on ipadJQuery/CSS 菜单不会浮动在 ipad 上的固定 div 上
【发布时间】：2012-12-07 11:53:57
【问题描述】：

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

谁能帮帮我？

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

http://jsfiddle.net/LBv8f/

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

$(document).ready(function ()

【问题讨论】：

标签： jquery html css ipad

【解决方案1】：

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

工作 DEMO（在 Ipad 上测试）

【讨论】：

【解决方案2】：

ipad 上没有悬停的概念，因此显然悬停在 iPad 上不起作用。话虽如此，您已经使用了位置，您可以使用 ipad 的媒体查询来根据需要在 iPad 上定位菜单。

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


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

【讨论】：