CSS overflow not working in chrome - html

Question

I have a "mega menu" that contains a .png that's supposed to hide after the user mouses off the menu. It works as expected in IE but not Chrome - it leaves the areas of the picture that hang out past the menu.
As per Sparkys suggestion, here's the JSFiddle
Here's a link to my development folder:
http://libertyeaglearms.com/dev/
here's a direct link to my css:
http://libertyeaglearms.com/dev/assets/menu.css
I think i t might have to do with line 6
.megaCreator a img{
display:block;
position:absolute;
bottom:-50px;
right:-50px;
max-width:550px;
outline:none;
border:none;
background:none;
}
but, I'm not sure.
If I need to post the code directly here I will, I'm not sure exactly where the problem lies so viewing all the css via the actual sheet, I feel ,would be better.
Here's a couple of screen shots showing the issue:
Here's the mouse over:
Here's the mouse out:
NOTE: I'm not using any javascript for the menu, in case the question comes up!
Thanks :)
HERE'S THE WORKING CODE -> JS FIDDLE

Answer 1

One of those rules is overwriting the overflow:
.megaMenu-fade > li.megaMenu-drop:hover > div,
.megaMenu-fade > li.megaMenu-drop:hover > ul,
.megaMenu-fade > li > ul li.megaMenu-drop:hover > ul,
.megaCreator > li.megaMenu-drop:hover > div,
.megaCreator > li.megaMenu-drop:hover > ul,
.megaCreator > li > ul li.megaMenu-drop:hover > ul
See:

Answer 2

I worked with it a lot and i find out that it has nothing to do with css as i change the "img" tag display to none (after the part image stayed on page), but it still stayed on. My guess would be it must be chrome graphic renderer problem that could not handle such a thing as sometimes it just disappears. my guess is it would be chrome's fault and not yours and as still as you don't put an element (like a div) over that image, the problem still exists.