How to Fix Superfish Dropdown Menu That Appear Under Floating DIVs in IE6

Posted in Web Development on 11 October 2009 8 comments

I am adding Superfish, a great jQuery drop-down menu to my monoshade theme. After I changed the colours and test it in MSIE, I found that the dropdown menu appear under the floating DIVs (content and sidebar), which causes the link to be unclickable.

It is actually a bug with z-index in MSIE, it is so famous that it was given a name – the “Z-index Bug”.

Simple Fix

After reading the posts out there (links below), I got the problem fixed by adding simple CSS z-index and position:relative.

This is my HTML structure:

<div id="navbar">my menu</div>
<div id="content"></div>
<div id="sidebar"></div>

I added these CSS and it was fixed.

#navbar { position:relative; z-index: 2; }
#content,#sidebar { z-index: 1; }

Explaination:
I gave the DIV with superfish menu a z-index of 2 and position:relative.
For other DIV elements near it, they were given z-index of 1.

Before the fix

After the fix

Related Posts:
- Superfish jQuery Menu IE z-index Bug

 

Posted by Zen on 11 October 2009 • 18,577 visits 8 comments
Tags :


or Subscribe to specific category only :




  - 8 Comments


Chalee says:

Im having the same problem except in firefox, any suggestions?

Radiculous says:

I’ve been having the same problem! I almost ripped my head off, until I stumbled upon your site. You saved me from upcoming headaches. :)

Thanks dude!

Anu says:

Great, Thanks alot

Jordan Morningstar says:

I was having that problem in all browsers; thanks for the help, and keep up the great work!

lucky_girl says:

Great post. You seem to have a good understanding about Navigation menus. Come on and keep writing your blog will be more attractive. To Your Success!

Denis says:

Thanks for the tip, add me to the series of people screaming at IE6 and wondering what was up with my code.

All is well with the universe now.

jeff says:

I appreciate this post. I’ve been having funky issues with my superfish menu interface to wordpress too. This has helped me check a bug that was driving me zany off of my list. A couple more to iron out but another one bites the dust.

Thanks!

Mrinal says:

Thanks for your help, it’s works for me.

Leave a Reply

You must be logged in to post a comment.

Previous Post
«
Next Post
»