JQuery/CSS菜單不會浮在固定div上的ipad

Question

我一直在一個網站上有一個固定的頂部div與一個簡單的下拉菜單和一個固定的左邊div下面。如果將鼠標懸停在IE或FF上的「停留地點」上，它可以很好地工作，但是當您在ipad上查看時，菜單子項會顯示在固定的左側div下。我已經嘗試過各種Z-index，但我無法正確地使它在ipad上正常工作。

任何人都可以幫助我嗎？

我這裏有編碼它的一個簡單的版本：

http://jsfiddle.net/LBv8f/

忽略這一點。 SO wouldnt讓我張貼，只有一個鏈接到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 
}