html - CSS : Image overlap the Dropdown menu issue?

Question

我有一个关于图像重叠下拉菜单的问题，我无法悬停。 图片我使用-webkit-animation。当它旋转到菜单时，下拉菜单将禁用。 如何让旋转图像不影响下拉菜单的工作。 我尝试了 z-index 并且图像层低于菜单但是当鼠标悬停在灰色图像上时下拉菜单仍然不起作用。我想要菜单使用权。任何解决方案？ 请帮忙。

这是我的代码 & Fiddle 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

也许你可以给图像 a: z-index: -10; (或类似的东西)在你的 CSS 中。 我不知道这是否有效，但值得一试。

我认为标准的 z-index 是 0 所以现在你的图像和菜单在同一个“层”上。我认为把它放在 -10 上会起作用