Css：圖像重疊下拉菜單的問題？

Question

我有一個關於圖像重疊的問題，我無法懸停下拉菜單。 我使用的圖像-webkit-animation。當它旋轉到菜單時，下拉菜單將被禁用。 如何讓旋轉圖像不影響下拉菜單的工作。 我嘗試了z-index，圖像層低於菜單，但當鼠標懸停在灰色圖像上時，下拉菜單仍然不起作用。我希望菜單正確使用。任何解決方案 請幫忙。

這裏是我的代碼&小提琴http://jsfiddle.net/bNBp3/130/

ul#main-navigation { 
     display:block; 
     border-bottom:1px solid #ccc; 
     margin:0 auto 0px auto; 
     min-height:21px; 
     padding:0; 
     width:100%; 
     clear:both; 
    } 
    ul#main-navigation li { 
     display:block; 
     float:left; 
     list-style:none; 
     margin:0 5px 0 0; 
     padding:0; 
     position:relative; 
     min-height:22px; 
     min-width:30%; 
    } 
    ul#main-navigation li a { 
     color:#000; 
     display:block; 
     padding:2px; 
     text-decoration:none; 
    } 
    ul#main-navigation li a.current, ul#main-navigation li a.section { 
     color:#fff; 
    } 
    ul#main-navigation li ul { 
     background:#eee; 
     position:absolute; 
     left:-1px; 
     top:21px; 
     display:none; 
     overflow:hidden; 
     padding:0px; 
     z-index:5; 
     width:100%; 
     border:1px solid #ccc; 
    } 
    ul#main-navigation li ul li { 
     display:block; 
     float:none; 
     margin:0; 
     width:100%; 
     border-bottom:1px solid #ccc; 
    } 
    ul#main-navigation li ul li a { 
     background:#eee; 
     display:block; 
     color:#333; 
     zoom:100%;  
    } 
    ul#main-navigation li ul li a:hover { 
     background:#fff; 
    } 
    ul#main-navigation li:hover { 
     background:#eee; 
     border-left:1px solid #ccc; 
     border-right:1px solid #ccc; 
    } 
    ul#main-navigation li:hover a.current { 
     background:#eee; color:#000; 
    } 
    ul#main-navigation li:hover ul { 
     display:block; 
    } 

    div#mcake{ 
     display:block; 
     overflow: hidden; 
     background-color:#ccc; 
     background-repeat: no-repeat; 
     position:absolute;  
     left:200px; 
     left:-250px\9; 
     top:10px; 
     top:100px\9; 
     width:200px; 
     height:200px; 
     -webkit-animation:airplane-wiggle 30s ease infinite;  
    } 

    @-webkit-keyframes airplane-wiggle 
    { 
     from{-webkit-transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);} 
     50%{-webkit-transform:rotateX(-40deg) rotateY(-5deg) rotateZ(-10deg);} 
     to{-webkit-transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);} 
    } 

Answer 1

你可以使用邊距在mcake推圖像向下

div#mcake{ 
    margin-top: 100px; 
    display:block; 
    overflow: hidden; 
    background-color:#ccc; 
    background-repeat: no-repeat; 
    position:absolute;  
    left:200px; 
    left:-250px\9; 
    ... 
    } 

Answer 2

，也許你可以給圖像：z索引： -10; （或類似的東西）在你的CSS。 我不知道這會工作，但它的價值嘗試。

我認爲標準的z-index是0，所以現在你的圖像和菜單是在同一個「層」上。我認爲把它放在-10將工作

Answer 3

我覺得的z-index將解決您的問題，與此相伴，你應該在這個你的CSS部分添加下面的代碼在所有瀏覽器進行工作，

add 動畫：飛機擺動30秒緩解無限;div＃mcake。

div#mcake{ 
....... 
........ 
.... 
-webkit-animation:airplane-wiggle 30s ease infinite;  
animation:airplane-wiggle 30s ease infinite;  
} 

和@keyframes

@keyframes airplane-wiggle 
{ 
    from{transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);} 
    50%{transform:rotateX(-40deg) rotateY(-5deg) rotateZ(-10deg);} 
    to{transform:rotateX(0deg) rotateY(5deg) rotateZ(5deg);} 
}