CSS overflow not working in chrome

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: