Comments on: Suckerfish Dropdown navigation going behind content

By: Jessica

Jessica — Wed, 02 Mar 2011 15:16:08 +0000

Thank you. You just saved me 10 hours of confusion

By: Tony

Tony — Tue, 22 Feb 2011 16:08:13 +0000

Wow you have no idea how much that helped. I have been trying for days to figure it out and the static directly on tag fixed it. Thanks you!!!!!

By: stephanie

stephanie — Thu, 21 Jan 2010 02:20:45 +0000

Thanks soooo much! I made a nav on my CSS and it was falling behind the content area and the "z-index" really helped!
For anyone else having this problem, here is some more info:
http://www.w3schools.com/Css/pr_pos_z-index.asp

THANKS!!

By: Erica

Erica — Mon, 21 Dec 2009 19:41:22 +0000

I'm having a similar problem with a weebly site right now. I'm customizing the site for my friend to use for her letterpress business. Flyout menus work perfectly in everything except IE – where the menus on the Invitations –> Wedding, etc. pages go BEHIND the pictobrowser. I tried putting in z-indexes for all the elements, tried putting in the wmode="transparent" in the embed tags – nothing is working. I think I'm losing hair… or maybe just pulling it out… here is the site:

blushdesignstudio.weebly.com

If anyone could give me some help, I would SO appreciate it – I just don't even know what to do at this point, short of scrapping the menus altogether, which is a shame since they work in everything except IE. (I hate IE more than anything… I've been having IE issues with other site designs all weekend… ugh…)

By: Jennifer

Jennifer — Mon, 09 Nov 2009 01:44:29 +0000

note for myself I had this happen again where position: relative had nothing to do with it. The suckerfish menu was going behind a youtube video, and adding wmode="transparent" to the embed tag fixed it. (Was only seeing the problem in IE)

By: Gareth

Gareth — Sun, 22 Mar 2009 22:18:31 +0000

Can somebody help me please?

I'm having the same IE7 problems with a suckerfish menu. The dropdowns work fine in Firefox, but in IE7, they go 'behind' the graphic underneath the menu. Annoying, as most of our visitors still use IE.

This is an extract from my template.css file.

/** @MENU **/

/** @SUCKERFISH **/

/* Mainlevel */
ul.menu-suckerfish {
z-index: 1;
float: left;
border-right: 1px solid #404040;
margin: 0;
background: none;
padding: 0;
list-style: none;
}

ul.menu-suckerfish li {
float: left;
display: inline;
background: none;
margin: 0;
padding: 0;
}

ul.menu-suckerfish a:link,
ul.menu-suckerfish a:visited {
display: block;
border-right: 1px solid #000000;
border-left: 1px solid #404040;
margin: 0;
padding: 3px 1.5em;
color: #ffffff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}

ul.menu-suckerfish a:hover {
background-color: #404040;
}

ul.menu-suckerfish li.active a {
background-color: #404040;
}

/* Sublevel */
ul.menu-suckerfish ul {
position: absolute;
left: -999em;
z-index: 2;
margin: 0;
padding: 0;
list-style: none;
}

/* Other containers */
ul.menu-suckerfish ul ul {
margin: -26px 0 0 184px;
z-index: 3;
}

/* Items */
ul.menu-suckerfish ul li {
position: relative;
width: 185px;
margin: 0;
background: none;
padding: 0;
}

ul.menu-suckerfish ul a:link,
ul.menu-suckerfish ul a:visited {
display: block;
border-top: 1px solid #366999;
border-right: none;
border-bottom: 1px solid #162c40;
border-left: 1px solid #162c40;
background: #284d73 none;
color: #cfdbe5;
padding: 4px 10px;
font-size: 0.9em;
font-weight: normal;
text-decoration: none;
height: 1%;
}

ul.menu-suckerfish ul a:hover,
ul.menu-suckerfish ul li.parent a:hover,
ul.menu-suckerfish ul li.parent li.parent a:hover {
border-top: 1px solid #1f3d59;
background-color: #1f3d59;
color: #ffffff;
}

/* Active */
ul.menu-suckerfish ul li.active a,
ul.menu-suckerfish ul li.active li.active a,
ul.menu-suckerfish ul li.active li.active li.active a {
font-weight: bold;
color: #ffffff;
}

/* Clear active */
ul.menu-suckerfish ul li.active li a,
ul.menu-suckerfish ul li.active li.active li a {
font-weight: normal;
color: #cfdbe5;
}

/* Children expanded */
ul.menu-suckerfish ul li.parent a,
ul.menu-suckerfish ul li.parent li.parent a {
background: #284d73 url("../images/suckerfish-expand.png") no-repeat 95% center;
padding-right: 10px;
}

/* Clear children expanded */
ul.menu-suckerfish ul li.parent li a,
ul.menu-suckerfish ul li.parent li.parent li a {
background-image: none;
}

/* Rollover actions */
ul.menu-suckerfish li:hover ul,
ul.menu-suckerfish li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul {
left: auto;
}

ul.menu-suckerfish li:hover ul ul,
ul.menu-suckerfish li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul ul,
ul.menu-suckerfish li:hover ul li:hover ul li:hover ul ul,
ul.menu-suckerfish li.hover ul li.hover ul li.hover ul ul {
left: -999em;
}

ul.menu-suckerfish,
ul.menu-suckerfish li li {
clear: left;
}

Can anyone suggest what I need to amend please?

Thanks

By: Steve

Steve — Wed, 20 Aug 2008 08:46:04 +0000

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.

By: Jennifer

Jennifer — Wed, 16 Jul 2008 14:48:05 +0000

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.

By: Kerry

Kerry — Wed, 16 Jul 2008 14:05:33 +0000

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!

By: lucas

lucas — Sun, 18 May 2008 03:16:50 +0000

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….