Css : Image overlap the Dropdown menu issue? - html

Question

I have a problem about the image overlap the dropdown menu that I can't hover.
The image I use -webkit-animation. When it rotate to the menu the dropdown will disable.
How can I let the rotate image doesn't effect the dropdown menu work.
I tried z-index and the image layer was lower than menu but dropdown menu still didn't work when mouse hover the gray image.I want the menu right to use. Any solution?
Please help.
Here is my code & 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

maybe you could give the image a: z-index: -10; (or something like that) in your css.
I dont know if this will work but its worth the try.
I think the standard z-index is 0 so now your image and menu are on the same "layer". i think putting it on -10 will work

Answer 2

you could use margin-top in mcake to push the image down
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

I think the z-index would resolve your problem , along with this you should add the below code in your css section for this to be working in all browsers,
add animation:airplane-wiggle 30s ease infinite; in div#mcake.
div#mcake{
.......
........
....
-webkit-animation:airplane-wiggle 30s ease infinite;
animation:airplane-wiggle 30s ease infinite;
}
and #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);}
}