Suckerfish Dropdown navigation going behind content
Awhile back, I had a project where I created a nice clean (X)HTML page including navigation using UL and LI tags. A few months later the client decided they wanted to add a dropdown menu to the navigation. No problem, I thought. We just add the embedded lists to the navigation - style it with CSS - and use the Suckerfish dropdown menu technique. Easy Peasy.
Except when I implemented it, the drop down menus were showing up BEHIND the rest of the content instead of “above/over it”.
There was a lot of other things going on in the page, I have a simple example that demonstrates the issue.
I’m sure it makes sense somehow, if I had a better grasp of what “position: relative” does to the document - beyond that “position: relative” allows items INSIDE a relatively positioned block to be absolutely positioned WITHIN it (which is why I had done that). The side effect though is that it does that crazy thing with the menu.
Oh the HOURS and HOURS to figure that out…. /sigh.
Here is the same page - with just that one line (position: relative) removed.
I’ve now seen this problem crop up a few times. In one case, I was working with a design that I had not originally created and even though there were no “position: relative” in any of the css files - the only way to get the menu to be ABOVE the content was to explicitly declare “position: static” inside the div tag itself. (Even just declaring it in the css wouldn’t fix it - somewhere else it must have still been getting overridden)
While I’m at the point where I can’t even imagine designing a page using a table based layout anymore, I still get hit with some CSS sticking points that I just don’t get. So if you have more insight on this feel free to elaborate in the comments. I’m just so glad I was able to get the menu working!
May 4th, 2008 at 9:15 pm
try setting the div’s z-index to a value of like 30 or something really high….
May 6th, 2008 at 3:45 am
z-index: 10 on #nav li ul will pop the menu forward.
Are you using Firebug (the firefox add-on)? It make debugging the css so much easier.
May 6th, 2008 at 5:21 am
More of an explanation now that I’ve had some coffee and a shower:
z-index: 10 on #nav li ul will pop the menu forward.
Absolute positioning takes the element out of the flow of the document. So elements that come after are stacked on top of the absolutely positioned one.
Z-index gives a weight to elements and the higher the number the more to the top of the stack the element is.
All elements have a default z-index of 1 (it’s actually the z-index of the parent element but unless it is set somewhere, it is 1). Z-index can only be specified on elements that have position specified.
Are you using Firebug (the firefox add-on)? It makes debugging the css so much easier.
May 6th, 2008 at 7:33 am
I know in the case most recently - where I had to specifically add “position: static” to the tag itself - that adding z-index to the embeded UL didn’t make a difference. (This is why I hate working with other people’s code/layout) - but good to know for the future - if I *have to* make the next div position: relative - that I should start working with z-index to fix the navigation issue…
May 6th, 2008 at 9:50 am
And now I’m also hearing from some people that one of the pages where that navigation lives is plauged with a “sticky hover” problem. I’m still working on resolving it - but going to save this link here for (my) future reference.
http://www.satzansatz.de/cssd/pseudocss.html#stickyhover
May 17th, 2008 at 8:16 pm
i generaly do a div{position: relative;} at the very begining of my css files so that if i have any absolutely positioned divs they don’t screw up and be positioned absolutely in the page….. it also takes care of z-indexing….
July 16th, 2008 at 7:05 am
I was having the same problem, hours and hours spent trying to fix it, to the point I was almost in tears!
By removing the “position: relative;” from the CSS under the “#content-wrap” absolutley worked a treat and now my drop-down suckerfish menu works sits above the main content.
So simple, and yet so very very effective.
THANK YOU SO SO VERY MUCH
Total Star!
July 16th, 2008 at 7:48 am
For some reason the second example has stopped working entirely. :/ Not sure why. At some point I’ll get around to cycling back to this issue to fix the examples.
August 20th, 2008 at 1:46 am
Just learned yesterday that in IE, if the dropdowns are in one section that is position:relative, and the area where they are to display is in another position:relative section, that the dropdowns display behind the content in the second section.
I was able to resolve this by combining both sections into one so the whole thing was in one position:relative . After doing so it works fine.
My original attempt worked fine in FF. It was IE (as usual) that was the problem. This resolved the IE problem.