[Solved] Son of Suckerfish multi tiered drop down menu - please help

You're missing two crucial pieces of code:

#navtop li { position: relative; float: left; padding: 0; width: 10em; color: #380074; }

#navtop li ul {
position: absolute;
left: -999em;
top: 2.1em;
height: auto;
width: 14.4em;
w\idth: 13.95em;
font-weight: normal;
margin: 0;
}

with those in there, you don't need a negative top margin on #navtop li ul ul but instead:

#navtop li ul ul { top: 0; margin: 0 0 0 14em; }

Thanks Tyssen - appreciate the assistance.

I had a hunch I was missing some important code. I've added your code and while the drop down menu has improved considerably it's still not quite right (2nd and 3rd tier positioning problems) http://www.jaydaniells.com/Client/charter/cp-corpsite/index-dropdown.html .

Have updated the screenshots of it in IE 6, IE7 and Firefox 2. Still renders somewhat inconsistently http://www.jaydaniells.com/Client/charter/cp-corpsite/dropdown-rendersIE.html .

Would you mind please offer me further assistance to achieve this consistent DD as per my mock-up http://www.jaydaniells.com/Client/charter/cp-corpsite/dropdown-renders-ideal.html

Thanks again,
JD

Put up a version of the page with all the different stylesheets pasted into the head of the document and I'll have a look. I can't be bothered to cut and paste all the bits and pieces together again.

Thanks again Tyssen,

As you've asked I've put up a page with all the CSS embedded as well as the JavaScript file.

http://www.jaydaniells.com/Client/charter/cp-corpsite/index-dropdown-embed.html

Thanks again - am appreciating your help heaps.

JD

This looks about right in FF2, IE6 and IE7 (I've commented out bits you don't need):

/* Navigation */ div.navigation { /*position: absolute; width: 100%; top: 102px; */ margin: 0; padding: 0; cursor: default; }

#navtop, #navtop ul {
float: left;
width: 100%;
list-style: none;
line-height: 1.75;
background: #E4E4E4;
font-weight: normal;
padding: 0;
margin: 0;
font: 11px arial, helvetica, sans-serif;
}

#navtop a, #navtop .navlink {
display: block;
width: 10em;
w\idth: 6em;
color: #0F3C9F;
text-decoration: none;
padding: 0.35em 2.2em 0.35em 1.7em;
border-right: 1px solid #fff;
}

#navtop .navlink {
padding: 0.35em 1.6em 0.35em 1.7em;
}

#navtop li.daddy {
padding: 0.25em 0 0.25em 1.7em;
width: 12em;
color: #0F3C9F;
}

/*
* html #navtop li.daddy {
width: 14.4em;
}
*/
#navtop li {
position: relative; /* Added 21-01-07 */
float: left;
padding: 0;
width: 10em;
color: #380074;
}

#navtop li ul {
position: absolute;
left: -999em;
top: 2em; /* Added 21-01-07 */
height: auto;
width: 14.4em;
w\idth: 13.95em;
font-weight: normal;
margin: 0;
}
/*
html>body #navtop li ul {
margin: 0 0 0 -1px;
}
*/
#navtop li li {
padding-right: 1em;
width: 13em;
}
/*
* html #navtop li li {
width: 14.4em;
}
*/
#navtop li ul a {
width: 13em;
w\idth: 9em;
border:none; /* added */
text-align: left;
}

/*
* html #navtop li ul a {
width: 13em;
}
*/
#navtop li ul ul {
/* margin: -1.75em 0 0 14em; */
top: 0;
margin: 0 0 0 10em;
}
/*
html>body #navtop li ul ul {
margin: -1.6em 0 0 10em;
}
*/
#navtop li:hover ul ul, #navtop li:hover ul ul ul, #navtop li.sfhover ul ul, #navtop li.sfhover ul ul ul {
left: -999em;
}

#navtop li:hover ul, #navtop li li:hover ul, #navtop li li li:hover ul,
#navtop li.sfhover ul, #navtop li li.sfhover ul, #navtop li li li.sfhover ul {
left: 0;
}

#navtop li:hover, #navtop li.sfhover, #navtop a:hover {
background: #001A8F;
color: #FFFFFF;
}
/*
* html #navtop li.sfhover {
position: relative;
}
*/
div.content {
clear: left;
}

/* End Navigation */

You also need to change this line in your javascript:

var sfEls = document.getElementById("navtop").getElementsByTagName("LI");

Needs to have the same ID as your nav.

Hi again,

Thank you so much!! Looks good and you've saved by bacon. Fingers crossed it'll render correctly on mac Safari also.

Thanks again and I'm also so glad I posted on CSS Creator.

JD

The following link shows my adaptation of the Suckerfish Drop Down Menus.

http://freedom.up.net/~jolove/Worship_Folder/Saint_Louis_Folder/suckerfish_menu.html

Note that I have left only the menu code in the above, so none of the links in this bare-essentials page will work.

The drop down menus work on Firefox, Safari, Mozilla (or, SeaMonkey), Netscape, Opera, and IE 5.2 for the Macintosh.

For Windows, I have only looked at IE and the menus works there.

For IE 5.2(Mac) there are problems with stacking order (z-index) and IFRAMEs (if they are part of the non-menu content) ... but IE 5.2 is a subject all by itself)

Thanks John,

That's a beauty! I've ended up refining the drop down menu system and is all working great now http://www.charterpacificserver.com/index.php .

The development team of TweakCMS have offered great assistance in getting the drop down menu and other aspects of the CMS driven site up and operating correctly http://www.tweakcms.com/ .

Thanks again and will bookmark your drop down menu for future reference (looks great in Firefox 2 on the PC too btw) ,

JD