0

I have a drop down menu on: http://whitehornguard.com/ but in at least IE7 the drop down part is appearing underneath the large header image, I have tried changing the z-index & using !important but it doesn't seem to be making any difference..

What am i doing wrong? Thanks.

472084
  • 17,666
  • 10
  • 63
  • 81
  • A well-known problem. Google "ie7 z-index" for articles. Here's one that sounds a lot like your situation: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ – Blazemonger Nov 16 '11 at 16:54
  • possible duplicate of [ie7 z-index problem](http://stackoverflow.com/questions/1287439/ie7-z-index-problem) – Blazemonger Nov 16 '11 at 16:56
  • make sure your #header_image and li.menu_item has a z-index as well – Alex Nov 16 '11 at 16:58
  • Just gave them all a z-index & position, still no luck. – 472084 Nov 16 '11 at 17:07

3 Answers3

2

This is a known issue with IE. There is a trick to workaround it. Try wrapping the menu with additional container with the following styling:

<div id="wrapper" style="position:relative; z-index: 1000;">
    <div id="menu" style="position:absolute; z-index: 999;"></div>
</div>

Please notice that the menu's z-index is less then the container.

For more details please check: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Maxim Manco
  • 1,954
  • 1
  • 12
  • 19
0

The problem is, that IE just requires some use of position. So the z.index will just be used, if position is present. For an element, you don't want to give any positioning-rules, just try to set position:relative

StoryTeller
  • 1,673
  • 12
  • 30
0

You wrap your nav in a div with inline styles. Add z-index:1000; to it. It fixes the issue.

bobek
  • 8,003
  • 8
  • 39
  • 75