8 replies [Last post]
JD0027
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-2
Joined: 2007-01-20
Posts: 9
Points: 0

Hi,

This is my first post on CSS Creator.

I've not been working with CSS for too long so am a relative beginner. Currently working on this client website and have to incorporate an unordered list multi-tiered drop down menu.

Have researched Drop Down menu options fairly widely. Considered purchasing the "Project VII" "Pop Menu Magic" http://www.projectseven.com/products/menusystems/pmm/index.htm

and donating to and using "The ULTIMATE CSS only drop-down menu" by "CSS Play" http://www.cssplay.co.uk/menus/final_drop.html

At this stage however I

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're missing two crucial

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; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

JD0027
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-2
Joined: 2007-01-20
Posts: 9
Points: 0

Crucial code added but still not quite right

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Put up a version of the page

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

JD0027
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-2
Joined: 2007-01-20
Posts: 9
Points: 0

page with embeded CSS uploaded

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

This looks about right in

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

JD0027
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-2
Joined: 2007-01-20
Posts: 9
Points: 0

Looks good! - thank you

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

john love
john love's picture
Offline
Enthusiast
Last seen: 3 years 27 weeks ago
Timezone: GMT-4
Joined: 2006-12-09
Posts: 62
Points: 14

Suckerfish Drop Down Menus

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)

"Give someone a plate of food and you feed them for today .. teach someone to plant crops and you feed them for life"

Touch the Future! -- Teach!

JD0027
Offline
newbie
Last seen: 7 years 16 weeks ago
Timezone: GMT-2
Joined: 2007-01-20
Posts: 9
Points: 0

Adaptation of the Suckerfish Drop Down Menus.

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