Superfish drop down menu, how to fix z-index in ie6 and ie7?

Question

I am using the superfish plugin for jquery here: clicky

it works fine in all modern browsers FF,Safari, Chrome, IE8

but it seems like the z-index is not working in ie6 and 7

you can see the menu is appearing, but being cut off by the elements below it.

I have tried adding a z-index everywhere I can think of but nothing seems to fix this.

How can I fix this?

Thanks!!!

Answer 1

I don't have IE6 handy right now so I can test for you.

You could try adding "position:relative" to the elements you are applying z-index to.

Answer 2

Using superfish with IE you should use the bgiframe plugin. From the superfish FAQ:

Does the Superfish plugin work with any other plugins?

Yes – here are a few useful plugins that you may wish to add to your menu:

...

4. BgIframe. Another plugin you may need is Brandon Aaron’s bgIframe plugin. This will solve the Internet Explorer bug described in the ‘bgIframe’ example on this site. 90% of people will not need this (yes I made up that statistic).

Answer 3

Thanks to Emily on this other Stack overflow question for pointing me in the right direction.

• IETester is a useful tool for checking against various IE versions
• The superfish FAQ linked blog post fixed the problem for IE8.
• For IE6/7 (probably combined with the fix for IE8 above), I found with my version of suckerfish that I had to put the z-index on .sf-menu li