CODEWITHSUNDEEP
jquerycssinternet-explorer-7drop-down-menu
Justine
Justine

Reputation: 1908

Dropdown menu disappears in IE7

A weird problem with a dropdown menu in IE7: http://screenr.com/SNM

The dropdown disappears when the mouse moves to a part that hovers above other layers.

The HTML structure looks like this: 

<div class="header">
<ul class="nav>
    <li><a href="">item</a>
    <ul><li><a href="">sub-item</a></li></ul>
    </li>
</ul>
</div><!-- /header-->
<div class="featured"></div>
<div class="content"></div>

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!

Upvotes: 3

Views: 5537

Answers (5)

Brett DeWoody
Brett DeWoody

Reputation: 62743

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 state.

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.

Upvotes: 4

Humberto Matias
Humberto Matias

Reputation: 1

I had a similar issue using IE7. I finally fixed! My problem was the the fact the IE7 has a problem with display:block. So my link was not in all li but just at the actually text inside the li. I fixed that putting a width at the 'a' in the css with the same size of the ul. Now, it's working! I am so happy that I am looking back every page I was looking the answer for and trying to help people out. if anyone want a better explain, just send me a e-mail. [email protected]

h!

Upvotes: 0

Amit
Amit

Reputation: 7818

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.

Upvotes: 0

HaleFx
HaleFx

Reputation: 857

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.

Upvotes: 0

HaleFx
HaleFx

Reputation: 857

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.

Upvotes: 0

Related Questions