Question

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

这是我的代码＆amp;小提琴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会起作用

Answer 2

你可以在mcake中使用margin-top来推动图像

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

Answer 3

我认为 z-index 可以解决您的问题，您应该在css部分添加以下代码，以便在所有浏览器中使用

添加动画：飞机 - 摆动30s轻松无限; 在 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);}
}

Css：图片重叠下拉菜单问题？

3 个答案: