Dropdown menu disappears in IE7?

Through dumb luck I think I figured out the solution.

Up vote 1 down vote favorite 1 share g+ share fb share tw.

A weird problem with a dropdown menu in IE7: screenr.com/SNM The dropdown disappears when the mouse moves to a part that hovers above other layers. The HTML structure looks like this: item sub-item The sub-menu is positioned absolutely and has visibility:hidden, then it's set to visible using jQuery, like so: $(". Header ul.

Nav li"). Hover(function(){ $(this). AddClass("hover"); $('ul:first',this).

Css('visibility', 'visible'); }, function(){ $(this). RemoveClass("hover"); $('ul:first',this). Css('visibility', 'hidden'); }); I had a problem with the dropdown hiding under other content in IE7, fixed easily by giving the z-index to its parent and other divs: *:first-child+html .

Header { position: relative; z-index: 2! Important; } *:first-child+html . Content, *:first-child+html .

Main, *:first-child+html . Primary *:first-child+html . Featured { position: relative; z-index: 1!

Important; } Now, I have no idea why the menu disappears when hovered over other divs, you can view the site live here: http://dev.gentlecode.net/ama/ubezpieczenia.html I would love any help, been staring at this code for ages now without any solution. I guess it's just me tunnel visioning already... Thanks in advance for any help! Jquery css internet-explorer-7 dropdown link|improve this question asked Mar 28 '10 at 15:16Justine1671616 54% accept rate.

You are missing a comma after *:first-child+html . Primary, not sure if that matters. – Amit Sep 5 '10 at 23:18.

Through dumb luck I think I figured out the solution. I started adding background colors to different elements in the drop-down menu to see if there were any 'holes' that might be effecting the :hover status. When I added a background-color:#HEX to the 2nd-level links in the menu everything started working on IE7.

I then tried using background-color:transparent but that unfortunately doesn't work. Finally I tried it with a transparent background-image and that DOES work. So the solution is to either add a solid background-color, or a transparent background-image to the 2nd level links in your drop-down menu.

I think the problem is in the "primary" div within the "content" div. Try setting a low z-index value on . Content .primary.

Honestly, absolute positioning is rarely the best way to achieve a CSS layout like this, and while a more flexible layout could have its own problems, it wouldn't be these problems. Also, the :first-child pseudo-class doesn't function very well in IE, so that could be the real source of your bug.

Only the flyout menu is absolutely positioned , rest of the div have relative position so I could use z-index on them to fix the menu hiding under them. The . Content .

Primary has a low z-index as you can see in the code in the main post. The problem appears when you hover the mouse on the flyout at exactly the spot where . Header ends, so I believe z-index may be the source of my problems, I just can't figure out how.

– Justine Mar 29 '10 at 8:38.

I'm not sure your CSS selectors are selecting what you intended. Unless you're using some CSS hack or something of which I am not aware, *:first-child+html . Content would select all .

Content elements which are descendants of an html element that is adjacent to the :first-child of any other element. The html element should not be adjacent to any other elements, so I think the z-index: 1! Important; declaration is not being applied to anything.

I think it disappears because you have a margin / space set. So when your mouse is hovering that margin/space, you're technically not hovering over the ul. I know, it's weird, and doesn't quite make sense, but IE7 is stupid like that.

To fix it, you need to remove top/bottom margins. Replace them with padding. It happened to me once, but I fixed it by removing all margins and replacing with padding.

Not sure if that will help in this scenario. Good luck.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.