为什么菜单出现在Chrome和FireFox中，而不出现在IE中？

Question

Why does the top category menu (Everything, Ballet Flats, Boots, etc) - div id="header-bar" - look great in FireFox and Chrome, but be hidden in IE unless you scroll down the page?

http://shoeporn.com

Any help will be much appreciated :)

Answer 1

It's positioned underneath (behind) the top bar. Either change the z-index to something bigger than the top bar, or change the top to position it below the top bar.

Answer 2

Its hidden in chrome as well. The z-index is lower than the one of the background or something. Anyway add something like this to your header-nav:

z-index: 130;

Answer 3

I find setting position:absolute on #header-bar in this particular example to be poor practice. Consider changing that to

#header-bar {
  position: relative;
  /*left: 0;
  right: 0;
  top: 44px; - remove these*/
}

This will maintain natural document flow; position:relative allows for dropdown positioning and maintaining rendering context (compare with removing position property altogether and see the dropdown menus going "behind" the shoe tiles)

Rule of thumb: avoid absolute positioning if you can build without it.

Answer 4

For me its hidden in chrome too... anyway change this in css:

#header-bar {
   top: 84px;
   z-index: 105;
}

remove z-index from #header-wrapper and add z-index:106 to #header-nav.

Hope it will help...