scriptygoddess03 May, 2008
Suckerfish Dropdown navigation going behind content
Posted by: Jennifer In: CSS|Javascript
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!
