CSS overflow not working in chrome

Question

I have a “mega menu” that contains .png, which should be hidden after the user exits the menu. It works like in IE, but not in Chrome - it leaves image areas that go beyond the menu.

As suggested by Sparkis, here's JSFiddle

Here is the link to my development folder:

http://libertyeaglearms.com/dev/

here is a direct link to my css:

http://libertyeaglearms.com/dev/assets/menu.css

I think this may relate to 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 publish the code right here, I will, I don’t know exactly where the problem is, so looking at all the css through the actual sheet, I think, would be better.

Here are some screenshots showing the problem:

Here's the mouse:

Here's the mouse:

NOTE. I do not use javascript for the menu if a question arises!

Thanks:)

HERE WORK CODE → JS FIDDLE

Answer 1

One of these rules overwrites 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 

Cm:

Answer 2

I worked with him a lot, and I found out that it has nothing to do with css, since I change the display of the "img" tag to none (after the image of the part remains on the page), but it still remained. I guess this should be a problem with the chrome-graphic renderer that could not handle such a thing as sometimes it just disappears. I assume this will be a chrome error, not yours, and since you are not putting an element (like a div) above this image, the problem still exists.