Superfish jQuery Menu IE z-index Bug
As a good and stable dropdown menu I’m using the Superfish jQuery menu plugin by Joel Birch. Superfish is an enhanced Suckerfish-style menu jQuery plugin that is quite easy to customize. With a lot of options it can be tailored to your needs. But thanks to our friend IE you might experience the z-index bug. The fix is very simple!
The IE z-index issue:
I really like this dropdown menu and in Firefox (as almost always) everything worked properly. But then I tested in IE. The source code was similar to this
<div id="header">
<div id="nav" class="sf-menu">Here the menu</div>
</div>
<div id="content">Here the content</div>
Both the header and the content div have position:relative. In IE the dropdown menu was displayed under the content div so the links in the dropdown were not clickable though the z-index of the menu list was set to 100.
The fix is so simpel:
After a bit of research I came accross the IE z-index Bug on Klog – php, linux, ajax, javascript. On this page Kae Verens describes the bug and gives an example. But the solution was some kind of unsatisfactory for me. But one of the commenters – Michael – posted a very simple solution.
You do not have to set the z-index on the menu or its children but on the two position:relative elements header and content (in my example). So I set:
#header {
z-index:2;
}
#content {
z-index:1;
}
and the problem was fixed! Thanks to Michael. This is basic CSS knowledge, but once you dived into the menu’s css it is hard to see 
Relevant Links:
- Superfish – Suckerfish on ‘roids
- Download – Superfish
- Support – jQuery Mailing List
- Tutorial: jQuery Dropdown Menü mit Superfish (German)
Simon [webdemar]
Moin, ich bin Simon und betreibe webdemar.com als meine ernstgemeinte Spielwiese für WordPress, Webdesign und so.
96 Kommentare
2 Trackbacks
- Neuer Theme, “deCoder” » Matthias Furrer’s Weblog - [...] multi-level dropdown menu (IE problems?) [...]
- ZENVERSE – How to Fix Superfish Dropdown Menu That Appear Under Floating DIVs in IE6 - [...] Posts: - Superfish jQuery Menu IE z-index Bug Posted by zen @ 11 October 2009 0 comments ...
Kommentar schreiben
13. November 2008
Hi, after much research and reading about iframes and other horrible fixes, this was the answer. So simple. A valuable lesson learned. Many thanks for posting!
19. November 2008
woow very nice
thanx.
20. November 2008
@james:
Exactly! It is so simple, but though you have to know. I didn’t and could have gone crazy with this
16. Dezember 2008
WoW man even IE6 obeys. This has saved my life!
Thx so much for taking the time to post this.
5. Januar 2009
Nice one! I read the klog post before reading this and somehow I had missed Michael’s solution! I was having the exact same problem as you (including the superfish menu). You nailed it, mate!
23. Januar 2009
Wow. This is ESSENTIAL CSS knowledge. Thanks sooo much for posting this! Saved me rewriting a load of jQuery. Thanks!
25. Januar 2009
Great fix! Just what I needed. Thanks!
27. Januar 2009
I have been looking every for this fix. So, so simple. I had tried z-index everywhere else, but actually having read up on the attribute this solution makes perfect sense.
thank you.
27. Januar 2009
@Timid&friendly:
I was surprised too
@Alex:
Happy I could clear things up.
@Tim Fletcher:
That’s what I thought when I found this fix.
@Tony Gray:
Welcome!
@Tim:
Yeah, it is soo simple but hard to see once you dived into the menu css trying to find the fix there
11. Februar 2009
I am curious to know what your PHP code is you used to output your page menu? Are you using the new
wp_page_menu? Would you care to share?? I would gladly give you credit and put a little tutorial together on my site! Or if you would like to write it..Thanks!
11. Februar 2009
@WPCult:
To use the new function wp_page_menu() is possible but not necessary. To output a superfish menu in WordPress you just need an unordered list of your pages or categories with the subs as child lists:
<ul> <li>Parent item</li> <li>Parent item <ul> <li>Child item</li> <li>Child item</li> </ul> </li> <li>Parent item</li> </ul>As you might know you get these lists by using wp_list_pages or wp_list_categories. The only things to do is to implement the superfish plugin and apply the css class sf-menu to the list:
<ul id="any-id" class="sf-menu"> <li>Parent item</li> <li>Parent item <ul> <li>Child item</li> <li>Child item</li> </ul> </li> <li>Parent item</li> </ul>I published a post (German) on how to get superfish running in a normal website and wanted to write the second part (German) on how to make a superfish menu with WordPress.
But anyhow, please write this tutorial and I would to link to this article since I just cover the German superfish fans
13. Februar 2009
This works great! Thanks. I had to use “!important” at the z-index definition though to make it work.
17. Februar 2009
Merci bcp pour ce fix
5. März 2009
Thanks mate, very simple but was hard to find (-;
9. März 2009
Can anyone help me, I hve tried a few configuration and I cannot seem to be able to do it
Website is: http://www.ultimate3rivieres.org
Thanks
Claude
10. März 2009
@Claude:
Hey Claude. Please give some more details of your problem. As far as I can see the menu on your page is working right.
10. März 2009
Thanks for your time.
Well in Firefox it is alright but in IE 7 or 6 if you look under the second item in the menu (L’ATRUF) it goes behind the text… same is true for the options in the menu (except it is not apparent like the 2nd one)
http://www.ultimate3rivieres.org/v2/index.php
Thanks
10. März 2009
@Claude:
That’s because you didn’t put any z-index. Put you menu in another div (e.g. menu) and give it a z-index 2. The div#wrapper wraps the content and has to go under this menu div. So give it a z-index 1 in the stylesheet.
10. März 2009
Grrrrrr…. won’t work….
12. März 2009
It seem that my CSS file was deleted anyway I can send it to someone so you can have a look?
Thanks
Claude
16. März 2009
Thanks webdemar for the great deFusion Theme. It looks great and it’s exactly the kind of theme I was looking for, but unfortunately I cannot get the dropdown-menu to work properly in IE 6. I set the z-index as described but still it’s not working for me with the IE. I’d really appreciate your help.
Thanks, Christian
18. März 2009
Another solution (worked for me):
just add in your css
.sf-menu, .sf-menu * {
z-index:1000;
}
fixes IE7! funny: IE6 worked w/o this
27. März 2009
@cyberlord:
Thanks!
11. Januar 2010
I’ve been going crazy about this, thank you for sharing your profound genius work!
23. März 2009
BEST .. TIP .. EVER!
You saved me after hours of tweaking, and z-indexing the header div was really all it took. Thanks!
(And screw you, IE7)
24. März 2009
I have been fighting with superfish.
I can get it to run the dropdown smooth but th menus have Dark Blue and White.
I would like to have all of the menu items to be in white.
Any Ideas?
24. März 2009
I can send the CSS file to anyone that is willing to help.
Thanks
24. März 2009
Danke danke danke!
Du hast meinen Tag gerettet. Ich musste einfach die Positionierung von #Header und #Content auf relative setzen! Der IE macht mich fertig und nur wegen dem habe ich heute 2 Stunden lang z-index-Werte beliebigen Elementen zugewiesen. Aber es hat ein Ende.
Viele Grüße
24. März 2009
Thank you SOOOO much!! I thought i was going crazy when even adding position:relative and z-index to everything didn’t work. Best. Post. Ever.
7. April 2009
Hi webdemar,
I have the same issue, tried z-index stack for both divs, nav & main. Would it be in my case that the content is a flash movie? I tried also the wmode for flash to transparent, but IE7&8 seems to ignore. I am on MODX with superfish down there.
http://regentcasino.ro/beta
Thanks for any idea and your time.
Alex
20. April 2009
@Alexandru:
Since I’m not an expert in jQuery at all I would recommend that you post your question in the jQuery Mailing List. You’ll get an answer there.
7. April 2009
This tip is beyond awesome. It has saved me from hours of IE6 hell more than once. Great work!
18. April 2009
It is a well known bug with IE6 and 7 see the link for details:
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
23. April 2009
Thanx … it was usefull for me !
30. April 2009
Sh#t the bed. Who would have thought it could be that simple. Thanks heaps for posting this and thanks to Michael for the solution. You have saved a bucket load of hassle for me!!! =]
12. Mai 2009
Oh man, I love you.
13. Mai 2009
Thank you, I almost gave up because of this bug! But it seems that if there is a bug, there is alway (or almost) a fix for it
Cheers
14. Mai 2009
Really just at those codes to the header and content in the main stylesheet and it’ll work in IE?????
18. Mai 2009
Thank you so much for this post. I was nearing despair after switching from a MooTools menu script to Superfish. Thanks for sharing such a simple fix.
26. Mai 2009
Man, really really really thank you….
you saved my life
Cheers from Jordan
26. Mai 2009
Thanks very much for this, It was of great help to me…
Kudos
27. Mai 2009
This is greatest fix…
but I can’t find
#header {
#content {
So if someone can point me where to search.
I work on some joomla template and I searched in all .css but not luck.
So if you can answer me it would be very helpful.
Thanks in advance.
Regards,
Filip
27. Mai 2009
Hey Filip,
the IDs #header and #content are just examples for explanation. You have to find the div that contains the superfish menu and give it a higher z-index than the div that contains the content that is supposed to be under the dropdown menu.
9. Juni 2009
adding
.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me
28. Juni 2009
Good solution!!!!
thx
—
adding
.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me
14. Juli 2009
CYBERLORD!! (yes, I am shouting!) You are awesome. Your fixed worked perfectly. Thank you!
17. Juli 2009
seems to be nice solution, but does not work for me
28. Juli 2009
Wow you’re the greatest!! So simple!
28. Juli 2009
I originally tried this method and I couldn’t get it to work no matter what I did.
A friend suggested using this technique but setting the z-index of the culprit container to -1.
In this example it would be the same as setting the content div to z-index: -1;
Worth a try if the original method doesn’t work.
5. August 2009
Thanks for the very simple solution. You just saved my day.
18. August 2009
Thanks so much!
23. August 2009
I have tried this without success, anyone could help me? I’m used to play around with code, but this one in worthless
I agree it is so simple, but I can’t make it work on my side!!! My e-mail cferrongmailcom
24. August 2009
the solution is good but it didn’t work for me…can anyone help me on this..its very urgent
25. August 2009
You’re the man! Yes, it works! I had superfish drop-down sliding behind a jQuery slideshow and a “position:relative” div box .. and changing the z-index as outlined above did it!
PS: the problem seemed to occur whenever the dropdown was supposed to go over an element with “position: relative;” (regardless of z-index values) in IE7. Applied fix exactly as above & solved
26. August 2009
Holy mother of God. I am busy to get this problem solved the whole day. This post wasn’t the answer as well. What DID help was this:
Remove the “overflow:hidden;” out of the elements where the menu is positioned.
31. August 2009
Worked for me after adding position:relative to the nav-div and the above z-index method
31. August 2009
hi i have a problem on the enu on my website on ie6 the menu appears behind the text or content of the headers, in ie8 the menu is not animating. please i need your help.
kindly check leentechsystems.com/clients/printdivas
31. August 2009
Hi,
I am using jQuery for my site. I am facing the problem in IE7 with Z-Index. I have tried your code but it didn’t solve the issue.
I am facing the error at http://taste-expo.com
There is a logo box which is shifted down by 16 pixel.
Please help.
7. September 2009
Thanks for a very easily googleable (and good looking) page. Helped me in minutes -respec.
9. September 2009
Thanks a lot for this fix
17. September 2009
Super genial! Deine Seite habe ich schnell gefunden und hat wunderbar funktioniert. Ich wünschte die IE6 Fixes wären immer so simple. Vielen Dank!
17. September 2009
Wenn alle Fixes so einfach wären, hätten Webdesigner keine natürlichen Feinde mehr
Nee, natürlich hast Du Recht!
19. September 2009
Worked for me in IE8 thank you a million, what i had to do though was add the z-index to the superfish.css file as i had too many z-indexes in the the main style.css file and just by adding a z-index: 10; to the superfish.css file all worked just fine!
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
>> z-index: 10; /*to fix IE8 submenu*/ <<
Vielen Dank!
21. September 2009
My first drop down menu plugin working. I`m happy….. thanks for all… There is a problem for me.. Plugin Shows drop down pages only if i click on the parent one.
. Can we fix this to show it without click ? Thanks
25. September 2009
Nice solution for that problem.. I solved that issue using your trick
30. September 2009
Thank you, you just saved me a lot of debugging work!!
7. Oktober 2009
Unfortunately, this solution does not work for me. I have a slider bellow the superfish menu. But, in IE the slider hides the submenus of superfish.
Any idea?
26. Oktober 2009
none of these worked for me.
i finally fixed it like this (in superfish.css)
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #15234A; /*21438D CFDEFF*/
outline: 0;
z-index: 999999;
}
27. Oktober 2009
Hmm my menu is not working in forefox or IE, and those fixes dont work, blah any1 can help?
14. November 2009
Thank you so much for this – it saved a lot of time searching to find the elements that had no z-index.
cooli: in superfish.css .sf-menu, sf-menu * {
I added the line z-index: 5;
and then on html page, the content container has less z-index:2; which puts (5=menu) above (2=content) which works in my case.
14. November 2009
Thank you Simon! After hours of searching for a solution, this finally fixed the problem!
15. November 2009
Superb! You are a genius! Thank you.
17. November 2009
Thank you so much!! This saved me a lot of time..
17. November 2009
Hi,
The superfish dropdown menu Sublinks are not clickable while the flash is in content part. But it is working fine in FF except IE.
If any one help me to resolve the problem ?
18. November 2009
Thank you very much. It is very useful for me.
19. November 2009
Searching my style.css file for the superfish div, i do not know what keywords i am looking for. can anyone help me? website: http://www.dancefordonors.org
27. November 2009
Thank you very much for posting this smart solution!
5. Dezember 2009
Thank you very much for this VERY USEFUL and simple solution. I’ve searched so many other sites, and none of them worked. Now I don’t have to worry about IE … when it comes to the menu at least.
6. Dezember 2009
OH MAN!!!! Its such a no-brainer that Im embarrassed that I ran into this issue. After MANY google searches, I came across this article… and you were absolutely right! My content was overlapping over the menu… after setting the z-index on the content div lower than the menu wrapper… VIOLA! I was banging my head against the monitor… cant thank you enough!
Best,
Mike
8. Dezember 2009
This is really very good… Thanks
8. Dezember 2009
Hey!!
really really thanks for this!! itg was driving me crazy until I find your “repost”
Thanks, Michael
9. Dezember 2009
Where do I put the code? In the header of the template?
1. #header {2. z-index:2;
3. }
4. #content {
5. z-index:1;
6. }
21. Dezember 2009
Thank you thank you thank you. Your post was a perfect easy fix for a stupid IE problem!
22. Dezember 2009
Excelente solución! estuve con este problema desde hace más de un mes… Muchas gracias…!!!! Saludos desde Paraguay
27. Dezember 2009
awesome!!!!!!!!!!!!!!!!!!!!
15. Januar 2010
i was ready to give up, then i found your post, thank you thank you! i spent almost 2 hours working on 1 IE7 bug.
15. Januar 2010
Hi Guys,
i just cannot get it to work. I tryed the #header and content solution but i could not find these items in any ccs. I also tryes the z-index in superfish.css but that also does not work. Is there anyone who can help me the site is http://www.sailcenterloosdrecht.nl/
regards Jan
17. Januar 2010
Thanks a ton, final something which fixes the problem. First time I actually encounter this problem. Your fix is so simple and works perfectly. Much appreciated
20. Januar 2010
Thank you. You’ve just finished my 4h session of cursing.
23. Januar 2010
Thanks man, simple and working
27. Januar 2010
You’re a Legend.
11. Februar 2010
All drop down menus are displaying while refreshing every time..
The time it required for executing superfish.js all menus are dsplaying together for some seconds. Please give me the solution to avoid this improper css view.
Is it required any additional menu caching component to achieve good performance. Kindly help me to find the solution
Thanks
Prakash
16. Februar 2010
Thnks
3. März 2010
Great post. I first I thought it was not working for me, then I realised I needed to go another element up the document flow.
Thanks!
4. März 2010
Spent about 20 hours searching for a solution to my SPRY menu z-index problem. Just found your solution a few minutes ago. Edited two selectors in my CSS and problem solved!
Thanks so much!
8. März 2010
Hi folks,
I already tried solution son this page and cant figure it out, any help will be appreciate it! Here its the page i’m working with.
http://www.mundoregio.com/clasificados-monterrey/anumex/