7

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:

enter image description here

Here's the mouse out:

enter image description here

NOTE: I'm not using any javascript for the menu, in case the question comes up!

Thanks :)

HERE'S THE WORKING CODE -> JS FIDDLE

Improve this question
11
  • 1
    I would put everything inside a larger wrapper (width/height auto) to avoid overflow in the first place. Then when the outer wrapper hides, everything is gone. Commented Mar 3, 2013 at 19:19
  • Hm, didn't think of that. I'll mess around with that. Thank you :) Commented Mar 3, 2013 at 19:20
  • Also, please post a condensed version of the HTML/CSS for this menu in your OP. Commented Mar 3, 2013 at 19:22
  • I was going to condense it up, but I really didn't know what code was the problem of the source. I know that's best practice, but I figured with this particular problem viewing all the code in a single sheet was best. Commented Mar 3, 2013 at 19:48
  • I understand your thinking. However, the process of constructing a concise demo (with a jsFiddle) sometimes leads to a solution. Otherwise, if you don't, somebody else will have to. This is precisely why I only posted a comment/suggestion instead of an answer. Commented Mar 3, 2013 at 19:53

2 Answers 2

Reset to default
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:

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I figured it was something like that, but I couldn't find that actual source. I'll need dig in deeper.
I rewrote the code and you are correct! I was never able to locate the exact problem, but after eliminating much of the CSS it resolved the issue. I added a link to JS Fiddle which shows it working. Thanks you!
0

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.

Improve this answer

2 Comments

Interesting, I guess increasing the size of the menu is my work around. Thanks for taking the time :)
Your welcome. Yes as i guessed you should leave it behind an element

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.