[Solved] IE7 dropdown menu (the bad, the worse, the ugly)

[theDrake]

Hey guys, this is my first post because it is honestly the first problem I’ve ever been so entirely stuck on. Here’s my situation:

I have a standard pure CSS dropdown menu that needs to be supported back to ye olde IE7. As the user hovers over each top-menu item, the menu appears (bravo!), but as they start to move down the list, it’s gone.

GIF illustration

I have been reading about IE7 stacking contexts and it is my understanding that I should be able to set { position: relative; z-index: (something large); } on the parent element of my menu to deal with the disappearing submenu.

This has not worked for me, and I can’t find anything in my page content that would have a higher z-index than the menu anyway. (For one thing, nothing actually gets painted over the menu.) Got any clues? Simplified markup is over at Codepen.

Thanks for any help you can offer!

[Kingslayer]

Its a know Bug in IE. Usually it helps when you put position:relative; and z-index on the div that wraps your navigation. and make sure to put position:relative; on the div that comes after your navigation so for you .content

I have a link somewhere that explains it but i cant find it right now.

outline is also not supported in ie7

Works for me when testing. Changed border for outline.
Put position:relative; on content.
Got rid of the extra space top:64px; instead of 66

http://codepen.io/anon/pen/qyfil

[Paulie_D]

If the submenu is to be positioned immediately below the main nav then I’d avoid using px values completely…especially as these can be accidentally changed.

top: 100%; is much simpler and works regardless of the height of the main nav li.

[theDrake]

Thanks for the responses guys.

Paulie_D, that’s a good tip as far as best practice goes, so I’ll be sure to change that.

Kingslayer, it’s worth noting that the first submenu item has always been reachable, in every browser new or old, which rules out the gap problem. I’ve tried position: relative on everything I could think of and had no luck. (Unfortunately I’m having trouble recreating the problem in CodePen because the content element causing the bug is proving really hard to pin down).

Wolfcry, unfortunately the web app is not publicly accessible.

A new wrinkle today: This bug is also showing up in IE10. I think we can rule out the usual IE7 z-index bug.

IE10 illustration

(Sorry about the unreadable submenu — I stripped a lot of the styling for debugging purposes.)

[Kingslayer]

Can you post a direct link to the project ?

[TheDutchCoder]

Hi @theDrake

I’ve forked your Codepen and this works for me in IE7: http://codepen.io/TheDutchCoder/pen/bLyGw

What’s happening (in my opinion) is that the .row wrapper doesn’t actually have a right stacking index (z-index).

You made the .mainmenu have a position and z-index, but not the .row element within it. This could be the cause.

I’ve given ‘.row’ a position and z-index, as well as the main ‘.content’, so that the header is properly ‘above’ the other content.

Another note: it’s better to use padding on the a element in your menu and not on the li, also setting the .subnav to top: 100% makes sure it will always be “pixel perfect”, regardless of the contents/height of the parent element ;-)

Does this help you out a bit?

[theDrake]

Thanks guys, I will try these out and see if they help. If not I will see about getting a more accurate snapshot of the code.

[theDrake]

Okay, here’s the news.

Full code snapshot: (https://dl.dropboxusercontent.com/u/50320124/sample_site/index-debugging.html)

I have added the following:

/* Z-indexing for older IE */
.mainmenu {
  /* has position: fixed */
  z-index: 597;
}
.mainmenu .row {
  position: relative;
  z-index: 598;
}
ul.nav-main {
  position: relative;
  z-index: 599;
}
ul.nav-main li {
  position: relative;
  z-index: 600;
}
ul.nav-sub {
  /* has position: absolute */
  z-index: 601;
}
ul.nav-sub li {
  position: relative;
  z-index: 602;
}
/* quick hack to set z-index on any element following the mainmenu; should work in IE7 */
.mainmenu ~ * {
  position: relative;
  z-index: 1;
}

This actually fixed the IE10 bug, but not the IE7 one. In IE7, the submenu still disappears as soon as the cursor passes the first item (seriously IE?). By inspecting, I can see that it is not a spacing issue, though IE7 does have some strange notion that these <li>s need a bit of extra space up top. Could I possibly have missed an element that needs positioning?

[Kingslayer]

The Extra space is ie7 inheriting “line-height”.

But as its seems that the hoverable area is not as big as the parent li.

https://dl.dropboxusercontent.com/u/7209323/123/Frontpage.html

i added

a {
display:block;
zoom:1;
height: 100%;
}

which removed the spacing, i cant reproduce your bug exactly but try it

[Kingslayer]

because im stupid =/…

one will do :D hopfully too tired =(

[theDrake]

Woo! Solved! It was hasLayout after all.

https://dl.dropboxusercontent.com/u/50320124/sample_site/index-debugging-2.html

So what I added was:

/* triggering hasLayout */
ul.nav-sub {
  /* has position: absolute; */
}
ul.nav-sub li {
  width: 200px;
}

That got rid of the disappearing menu bug.

It was also apparently sufficient to remove the gaps at the tops of the <li>s. Kingslayer, your fix on the <a>s also removed the gaps, but hasLayout on the <li>s seems to catch both problems.

Thanks again to everyone who commented. I’ve always respected the CSSTricks community and now I know firsthand how helpful you all are.

[Author]

Posts