Superfish jQuery Menu IE z-index Bug
von Simon [webdemar] - 131 Kommentare
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.


126 Kommentare
james - 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!
Kurtlar Vadisi - 19. November 2008
woow very nice
thanx.
webdemar - 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
Timid&friendly - 16. Dezember 2008
WoW man even IE6 obeys. This has saved my life!
Thx so much for taking the time to post this.
Alex - 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!
Tim Fletcher - 23. Januar 2009
Wow. This is ESSENTIAL CSS knowledge. Thanks sooo much for posting this! Saved me rewriting a load of jQuery. Thanks!
Tony Gray - 25. Januar 2009
Great fix! Just what I needed. Thanks!
Tim - 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.
webdemar - 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
WPCult - 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!
Simon [webdemar] - 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:
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:
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
Paul - 13. Februar 2009
This works great! Thanks. I had to use “!important” at the z-index definition though to make it work.
Faly - 17. Februar 2009
Merci bcp pour ce fix
Dror - 5. März 2009
Thanks mate, very simple but was hard to find (-;
Claude F - 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
Simon [webdemar] - 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.
Claude Ferron - 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
Simon [webdemar] - 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.
Claude Ferron - 10. März 2009
Grrrrrr…. won’t work….
Claude F - 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
Christian - 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
cyberlord - 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
Simon [webdemar] - 27. März 2009
@cyberlord:
Thanks!
Mike - 11. Januar 2010
I’ve been going crazy about this, thank you for sharing your profound genius work!
Achton - 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)
Cory Conroy - 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?
Cory Conroy - 24. März 2009
I can send the CSS file to anyone that is willing to help.
Thanks
Manuel - 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
John - 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.
Alexandru - 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
Simon [webdemar] - 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.
Tim Fletcher - 7. April 2009
This tip is beyond awesome. It has saved me from hours of IE6 hell more than once. Great work!
saeed - 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
el_p - 23. April 2009
Thanx … it was usefull for me !
Nathan - 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!!! =]
Stefano - 12. Mai 2009
Oh man, I love you.
The Cat Lover - 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
Mad Max - 14. Mai 2009
Really just at those codes to the header and content in the main stylesheet and it’ll work in IE?????
James Pearson - 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.
Qutaiba - 26. Mai 2009
Man, really really really thank you….
you saved my life
Cheers from Jordan
TJ - 26. Mai 2009
Thanks very much for this, It was of great help to me…
Kudos
Filip - 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
Simon [webdemar] - 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.
sadasd - 9. Juni 2009
adding
.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me
Ken the Tech - 18. Juli 2010
as a matter or fact, the !important declaration is not recognized or partial only recognized by IE.
Pickle - 28. Juni 2009
Good solution!!!!
thx
—
adding
.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me
greenbee - 14. Juli 2009
CYBERLORD!! (yes, I am shouting!) You are awesome. Your fixed worked perfectly. Thank you!
andyM - 17. Juli 2009
seems to be nice solution, but does not work for me
Matt - 28. Juli 2009
Wow you’re the greatest!! So simple!
Old Republic - 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.
Matt - 5. August 2009
Thanks for the very simple solution. You just saved my day.
Leslie Freeman - 18. August 2009
Thanks so much!
Claude F - 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
webdev - 24. August 2009
the solution is good but it didn’t work for me…can anyone help me on this..its very urgent
Edith Karnitsch - 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
Pelar - 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.
ilz - 31. August 2009
Worked for me after adding position:relative to the nav-div and the above z-index method
Randolph Romero - 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
Rakesh - 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.
Glyn - 7. September 2009
Thanks for a very easily googleable (and good looking) page. Helped me in minutes -respec.
Andy - 9. September 2009
Thanks a lot for this fix
Alix - 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!
Simon [webdemar] - 17. September 2009
Wenn alle Fixes so einfach wären, hätten Webdesigner keine natürlichen Feinde mehr
Nee, natürlich hast Du Recht!
denis - 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!
Julian - 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
neel - 25. September 2009
Nice solution for that problem.. I solved that issue using your trick
Konstantin Krutov - 30. September 2009
Thank you, you just saved me a lot of debugging work!!
atsiot - 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?
Casey Carnnia - 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;
}
cooli - 27. Oktober 2009
Hmm my menu is not working in forefox or IE, and those fixes dont work, blah any1 can help?
Alan Schietzsch - 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.
romaspit - 14. November 2009
Thank you Simon! After hours of searching for a solution, this finally fixed the problem!
John Fox - 15. November 2009
Superb! You are a genius! Thank you.
Rakesh - 17. November 2009
Thank you so much!! This saved me a lot of time..
Mageshwaran - 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 ?
pham hong phuc - 18. November 2009
Thank you very much. It is very useful for me.
Paul Amador - 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
km - 27. November 2009
Thank you very much for posting this smart solution!
goldlilys - 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.
Mike Croteau - 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
indialike.com - 8. Dezember 2009
This is really very good… Thanks
Michael - 8. Dezember 2009
Hey!!
really really thanks for this!! itg was driving me crazy until I find your “repost”
Thanks, Michael
Wouter - 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. }
Brando - 21. Dezember 2009
Thank you thank you thank you. Your post was a perfect easy fix for a stupid IE problem!
M4730 - 22. Dezember 2009
Excelente solución! estuve con este problema desde hace más de un mes… Muchas gracias…!!!! Saludos desde Paraguay
freebeauty - 27. Dezember 2009
awesome!!!!!!!!!!!!!!!!!!!!
matt mcinvale - 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.
Polleke - 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
@nomadone - 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
Dawid Ciężarkiewicz - 20. Januar 2010
Thank you. You’ve just finished my 4h session of cursing.
Mohsen - 23. Januar 2010
Thanks man, simple and working
Ricky - 27. Januar 2010
You’re a Legend.
Prakash - 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
Ritesh - 16. Februar 2010
Thnks
Adam Chambers - 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!
Vince - 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!
Jesus - 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/
matthias - 14. März 2010
Hallo,
ich habe ein Problem mit einer vertikalen superfish-Navigation unter IE6. (www.helpenstein.com)
Die Navigation wurd nach rechts verschoben angezeigt. Hat jemand eine Idee woran das liegen könnte.
mfg
matthias
Benson - 29. März 2010
I use the same way to fix jquery lightbox issue.
but still fail to do the aciton.
Justin Goodlime - 1. April 2010
Sweet fix, danke.
5-squared - 22. April 2010
Thank you! Just saved me hours of IE hell
Really appreciate it!!
Leon - 28. April 2010
Worked like a charm!!! thank you!
Olga - 14. Mai 2010
Please, help me!!! I have this problem, I tried all recommendations, but it is not work with my site…
If some body can look it, i will be happy! I so need it! Thank you!
http://semcleaning.biz/
anjum - 26. Mai 2010
Hye
i did check ur menu i believe its in template.css line number 133 please remove overflow:hidden. It might work
Joel Glovier - 26. Mai 2010
Oh thank God…and the author of this post also. After searching and reading several posts filled with answers on this issue, this one finally worked for me!!!
I think it’s clearly very revealing that there are comments to this article dating back to a year and a half ago, but still this month developers are finding this solution helpful. Microsoft needs to seriously discontinue those old school browsers and stop supporting them entirely.
(the site in question for me that this fix worked on: http://betawww.helpcurenow.org)
Hilary Hoolahan - 30. Mai 2010
Thank you SO much – what a great fix. I spent ages last night fiddling around with my z-indices on all sorts of CSS elements to try and get my drop down menu bar going over the text I had nearby. I kept reading your solution but couldn’t fathom out how to integrate it into my CSS.
Then this monring with fresh eyes I re-looked at it and tried it so my NavBar had a Z-Index 2 and my BodyText Z-index 1 (and ignored the fact that other elements of my CSS had Z-indices of 1000,1010 and 1020) and it worked great!
Thank you again – this has saved me hours of frustration!
Hilary
Dexter - 31. Mai 2010
Thank you very much for this post.. I researched on complicated solutions involving javascripts and jQuery but the solution posted here is very simple man Thanks a lot..You literally saved my ass..
Tomo - 6. Juni 2010
Viel danke
.
G - 11. Juni 2010
I wish I’d found this like 8 HOURS AGO!!!! Many thanks. If you’re ever in Seattle, WA I’d love to buy you a beer!
johnykaralis - 11. Juni 2010
Hi i am facing the following problem.
in IE8 drop down menu works fine but in firefox and in chrome the drop down menu goes behind main div.
i have putted z-indexes to both header and main div. but it doesnt work in firefox and chrome.
link is http://www.gamosbook.gr
thanks
Russell - 14. Juni 2010
It’s a heavy weight sledgehammer solution but this page from Vance Lucas worked for me.
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
Everything seems okay now in Chrome, IE7, IE8, Safari5 and FF3.6
I couldn’t do anything about the position:relative settings of my page as I was using
http://code.google.com/p/css-template-layout/ to position my divs
drava - 16. Juni 2010
Awsome solution! Thanks a bunch!
lorem - 17. Juni 2010
i spent an hour trying to find the right z-index .. nothing worked, your solution is brilliant. However this worked better for me in all browsers:
#header * {
z-index:1000;
}
#content * {
z-index:1;
}
Richard - 18. Juni 2010
My submenu in IE8 has a gap between the menu and my sub submenu. Any Ideas?
imaria - 21. Juni 2010
Thanks! Worked great!
mtsweir - 13. Juli 2010
thanks a million!
Nick - 18. Juli 2010
Thanks a bunch! spent half a day trying to fix this issue, I was on the brink of a meltdown! you saved me dude!
James - 18. Juli 2010
OMG saved my life. THANKS!
Ken the Tech - 18. Juli 2010
tried everything, not working.
I added z-index with a higher value for the container div of the ul.menu than the z-index value of the .middle which is right below the nav menu. Nothing happen, the menu is still hidden in IE6.
I’ve tried also the add position:relative for these divs. The same result.
Any other workaround?
thx.
Martin Montgomery - 21. Juli 2010
Thank you SOOOOOO much – this worked for me on the frontpage slideshow and superfish menu combination.
The div of the header, the slideshow component and the container needed set for me. (3 z-index’s needed)
Really appreciate your post!
AnilG - 27. Juli 2010
Yes but MSIE 7 has problems using z-index and iframe or just has problems with z-index where content below is now unclickable. Nobody seems to know this and googling this issue just gets miles and miles of posts about ie6 issues on z-index.
Using the following CSS was crucial for me in making content overlap properly and still making the lower content clickable when the menu wasn’t floating over, in MSIE7
.sf-menu, .sf-menu * { z-index: 9999999 !important; }
aslan - 2. August 2010
thanks for sharing..
Zamshed Farhan - 4. August 2010
Nice job
really helpful.
Nicholas Ritchey - 9. August 2010
Thanks a ton — helped me fix my SuperFish problem as well!
Hans Blaettler - 1. September 2010
thanx for posting & sharing this great lifesaver!
fragmented - 2. September 2010
Viele Danke! We say in England “You are THE nuts!” cheers
5 Trackbacks