Z-index not working in IE 7. Menu going behind

HTML & CSS
1

HI All,

I have developed a website http://www.sgaustria.com
In IE 7 the menu is going behind the content. I tried z-index :9999; also but not working.:frowning:

<style type=“text/css”>
html .jquerycssmenu{height: 1%; z-index: 9998;} /Holly Hack for IE7 and below/
html .jqueryslidemenu ul { position: absolute ; z-index:9999; }
html .jqueryslidemenu ul li ul{ background: #FFF; z-index: 9998; }
</style>

Please help me!!

2

It’s the position: absolute you have there that’s causing the problem. Change it to relative.

There is a rendering bug with absolute inside relative positioned elements.

3

Hi noonnope,

Thanks for reply,

I Changed it to relative, it still same problem :frowning:
Now some black right side border came.

Any alternative ??

4

You have z-index:1 on #main. Get rid of it. And put a z-index on the most outer parent for the menu: #header.

The problem is that your JS code for drop down probably changes z-index and/or position?

5

Yo!! That Works.

its a great help noonnope.

Hats off to you :slight_smile:

Thanks a lot

6

No problem :slight_smile:

But, if I were you, I would try make that drop down work w/o js.

7

Do you have any code which work without JS

8

also, it does not really help having z-index in those other elements as you don’t have a position included. z-index only works when you declare position…

9

Try here: http://purecssmenu.com/. JS scripting is good, but for progressive enhancement. As in showing/hiding effects.