Subnav styling problems

Dropdowns where the submenu falls horizontally are a bit of a different beast from vertical ones and I'm not sure it's a good idea to mix the two directions (may be confusing for some). But you may want to look at these to get your first level of dropdown working before moving onto the next level.

http://www.tjkdesign.com/articles/dropdown/demo.asp
http://www.tjkdesign.com/articles/new_drop_down/default.asp

I definitely wouldn't do it in this way if I didn't have to... but this is how the client wants it done. You're not kidding about confusing.

I looked at those links that you offered, and am working on trying to learn from the author's code on the first link... but the second article just seemed to tell me what are the benefits of horizontal and vertical dropdowns, but didn't appear to offer any info on how to do them. I tried to look at the author's code, but it wouldn't appear to let me view the css code.

Are there any tutorials that you could direct me towards?

Here's the css from that 2nd example if it's any use ?

CSS - http://www.tjkdesign.com/articles/new_drop_down/default.asp http://www.tjkdesign.com/articles/new_drop_down/default.asp Embedded Styles from http://www.tjkdesign.com/articles/new_drop_down/default.asp

@import "TJK_dropDown.css";
/*\*//*/
@import "TJK_dropDown_ieMac.css";
/**/

http://www.tjkdesign.com/articles/new_drop_down/TJK_dropDown.css

body {font-size:small;font-family:Georgia, "Times New Roman", Times, serif;color:#666;padding:0;margin:0;background:#c30 url(/articles/img/Hor_dropDown_Demo/body.jpg) repeat-x;} img {border:0} #header {font-weight:normal;padding:10px 0 15px 10px;margin:0;background:#000 url(../img/Hor_dropDown_Demo/TJK_pure_css_dropDown_menu.gif) 100% 7px no-repeat;color:#ffc} h1 {border-bottom:1px dotted #999;margin:0 0 10px 10px;font-size:1em;line-height:2em;}h2 {border-left:10px solid #c30;color:#c30;padding-left:10px;margin:0 0 10px 10px;font-size:.9em} p {margin:5px 10px} #wrapper {background:#ececec;width:50em;max-width:100%;margin:25px auto;border-left:1px solid #fff;border-right:1px solid #999;border-bottom:1px solid #666;padding-bottom:20px} #header p{color:#333;width:10em;background:#fff;margin:0;padding:5px} #google {float:right;width:120px;margin:6em 10px;border:1px solid #999;display:inline;font-size:.75em;display:inline;background:#c30;}

#google p {font-size:1.2em;color:#fff;font-family:Geneva, Arial, Helvetica, sans-serif;margin-bottom:10px} p{margin-bottom:20px} p#cc {margin-top:20px;border-top:1px dotted #999;padding-top:10px;}

/************************************************/

/* Pure CSS Drop Down Menu [TJK_dropDown] v1.1 */

/* Copyright 2006, Thierry Koblentz */

/* TJKDesign.com. all rights reserved. */

/************************************************/

/* zeroing padding/margin for all elements */

#TJK_dropDownMenu,

#TJK_dropDownMenu * { margin:0;padding:0;}

/* "Master" UL (the whole Menu) */

#TJK_dropDownMenu {position:relative;background:#000 no-repeat 100% 50%;width:50em;max-width:100%;float:left;margin-bottom:3.5em;

}

/* sub-menu ULs */

#TJK_dropDownMenu li ul {

cursor:default;

width:48em;

max-width:100%;

position:absolute;

border-bottom:1px solid #ccc;

height:auto;

top:2.08em;

padding:10px 0;

padding-left:2em !important;

background-position:0 0 !important;

left:-9000px;

}

/* All LIs */

#TJK_dropDownMenu li {

cursor:pointer;

float:left;

width:8.23em;

max-width:16.5%;

text-align:center;

list-style-type:none;

font-weight:bold;

border-top:1px solid #fff;

}

/* sub-menu LIs */

#TJK_dropDownMenu li ul li {

padding:0 10px 0 0;

border:none;

width:auto;

max-width:none;

}

/* All anchors */

#TJK_dropDownMenu li a {

color:#666;

border-left:1px solid #333;

text-decoration:none;

display:block;

float:left;

padding:0 .4em;

height:2em;

line-height:2em;

}

/* sub-menu Anchors */

#TJK_dropDownMenu li ul li a {

position:relative !important; /* ie Mac */

cursor:pointer !important;

white-space:nowrap;

line-height:1.7em;

height:1.7em;

font-weight:400;

border-width:1px;

border-style:solid;

border-color:#ccc #999 #999 #ccc;

color:#666;

background-position:0 50% !important;

}

/* :hover and stuff */

#TJK_dropDownMenu li a:hover,

#TJK_dropDownMenu li a:focus,

#TJK_dropDownMenu li a:active {color:#000}

/* position and z-index for the sub-menus */

#TJK_dropDownMenu li:hover ul,

#TJK_dropDownMenu li.msieFix ul {left:0;z-index:10}

/* Current location - class on Body must match LI's id */

.AB #TJK_dropDownMenu li#AB a,

.CF #TJK_dropDownMenu li#CF a,

.GJ #TJK_dropDownMenu li#GJ a,

.KR #TJK_dropDownMenu li#KR a,

.ST #TJK_dropDownMenu li#ST a,

.UZ #TJK_dropDownMenu li#UZ a {color:#000;cursor:default;}

.AB #TJK_dropDownMenu li#AB ul,

.CF #TJK_dropDownMenu li#CF ul,

.GJ #TJK_dropDownMenu li#GJ ul,

.KR #TJK_dropDownMenu li#KR ul,

.ST #TJK_dropDownMenu li#ST ul,

.UZ #TJK_dropDownMenu li#UZ ul {left:0;z-index:5}

/* background images and border colors */

#TJK_dropDownMenu li#AB ul,

.AB #TJK_dropDownMenu li#AB {background:#e2facd !important}/* current location */

#AB,#AB li a,

.AB #TJK_dropDownMenu li#AB ul {background:#e2facd url(../img/Hor_dropDown_Demo/1.jpg) 0 100% repeat-x}

#CF:hover,#CF:focus,

#TJK_dropDownMenu li#CF ul,

.CF #TJK_dropDownMenu li#CF {background:#fffcd0 !important}/* current location */

#CF,#CF li a,

.CF #TJK_dropDownMenu li#CF ul {background:#fffcd0 url(../img/Hor_dropDown_Demo/2.jpg) 0 100% repeat-x}

#GJ:hover,#GJ:focus,

#TJK_dropDownMenu li#GJ ul,

.GJ #TJK_dropDownMenu li#GJ {background:#ffe1cc !important}/* current location */

#GJ,#GJ li a,

.GJ #TJK_dropDownMenu li#GJ ul {background:#ffe1cc url(../img/Hor_dropDown_Demo/3.jpg) 0 100% repeat-x}

#KR:hover,#KR:focus,

#TJK_dropDownMenu li#KR ul,

.KR #TJK_dropDownMenu li#KR {background:#fccae5 !important}/* current location */

#KR,#KR li a,

.KR #TJK_dropDownMenu li#KR ul {background:#fccae5 url(../img/Hor_dropDown_Demo/4.jpg) 0 100% repeat-x}

#ST:hover,#ST:focus,

#TJK_dropDownMenu li#ST ul,

.ST #TJK_dropDownMenu li#ST {background:#c9c9ff !important}/* current location */

#ST,#ST li a,

.ST #TJK_dropDownMenu li#ST ul {background:#c9c9ff url(../img/Hor_dropDown_Demo/5.jpg) 0 100% repeat-x}

#UZ:hover,#UZ:focus,

#TJK_dropDownMenu li#UZ ul,

.UZ #TJK_dropDownMenu li#UZ {background:#ffcebe !important}/* current location */

#UZ,#UZ li a,

.UZ #TJK_dropDownMenu li#UZ ul {background:#ffcebe url(../img/Hor_dropDown_Demo/6.jpg) 0 100% repeat-x}

/* "trigger" and "msieFix" classes */

#TJK_dropDownMenu li.msieFix a {color:#000 !important}

It's vital to understand the nature of descendant selectors with this sort of thing.

Your main problem is that your not seeing the nature of the rules being applied e.g when stating .nav li:hover ul you are applying a general rule based on ancestral nesting it is not specific to a particular element but rather says, this ruleset shall apply to ALL UL element that have a ancestor of LI which in turn has a ancestor named as .nav; this means ALL and ANY ul that are descended/nested in an element named .nav.

For multi level lists like this to work you must understand that you have to be more specific on the sub lists you MUST at some point override or reset the rules applied earlier.

This rule:

.nav li:hover ul {left:0;}

Is going to show all ul elements when you hover over ANY LI that is in .nav; clearly you do not want the third level UL to show when you hover over any LI so you need to do something like:

.nav li:hover>ul {left:0;}

Now we have been more specific as only the UL that are a child of a li being hovered are shown so hovering on the top level li will not now show the third level ul as it is not a child of an element being hovered.

We now would like the first sub UL to position horizontally so something like:

.nav li ul
{

position: absolute;
z-index: 100;
top: 19px;
left: -9999em;
width: 40em;
margin-left: 0;
padding-left: 0;
list-style: none;
border: 1px solid #fff;
color: #fff;
}

Will make the sub ul horizontal, notice I have removed the float:left floats and absolute do not mix in the same declaration block!

Now of course as you will observe ALL UL elements that have a ancestor LI will be positioned horizontally, not wanted so you need a declaration for your third level UL to re-set them to a Vertical arrangement problem here is that much earlier in your styles you state:

.nav li {float:left;}

This makes the li elements of your third level ul float to the left as it's sa general statement so you must effect a change to this declaration which could look like this:

ul.nav li ul li ul li{float:none;}

I have been very specific on the level of nested element I want to effect and now there is the semblance of a working menu, you would need to control the width of the third level UL as it is still being effected by the earlier rules for the ul elements as well as control the position of them.

There are various approaches to this lambina... You should pick up on the fact that as I have used the child selector '>' things won't work in IE6 so you need to think around that problem with more specific descendant selectors or by using classes (not the best approach)

This is by way of trying to help you to understand what you're dealing with rather than code up a solution for you, you will need to improve on this now that you know where the problems are with these types of menus.

You will also need to adjust the width of the anchors that you stated earlier or remove the width altogether for the anchors on the horizontal ul to allow the text to spread and not wrap.

Hugo.

Hugo, that helps me on a mammoth scale.

It's always best if I'm able to see what specifically I haven't understood, and where I'm going wrong, because it helps me change my thinking.

After going over what you explained and then reorganizing some of my code (helped greatly to comment "subnav starts here" and "sub-subnav starts here") I was able to attack it with a different way of thinking and now I've got it all looking and working properly (mind you, have only tested in FF so far) and am about to start figuring out how to replace the '>' which as you said, won't work in IE6.

I'll repost with an update on that '>' issue... at the moment it appears challenging but that's probably because I'm very hungry at the moment and have worked a long day.

I was hoping that it would be more helpful to try and explain the logic flow as once you have that then it becomes a whole lot easier the trick is grasping how descendant selectors actually work which initially most people don't appreciate.

it's easy when one can use all the combinators we ought to be able to use such as the '>' child selector and '+' sibling they were provided for a very good reason and make CSS quite flexible however IE managed to balls that up for us in a very major way, thanks MS!

For IE you really are forced to be laborious and as you cascade down through those rules you re-set earlier values as my long winded .nav li ul li ul li{float:none;} was designed to demonstrate placed in order to cancel the earlier float left on the more general .nav li {float:left;} that was being inherited by all li elements within .nav.

Suddenly all this will all click into place

You mentioned that using classes would not be the best approach. What about IDing the UL's to differentiate between them? Would that be a good way to go about it, or is that too similar to using classes?

Okay. So I think I've gotten somewhere...

Instead of this:
.nav li:hover>ul { left: 0; display: inline; }

I have this:
.nav li:hover ul { left: 0; display: inline; }
and then this:
.nav li:hover ul li ul { display: none; }

http://www.digitalpawprint.com/respiraide/respiraide.html

The good news is: I think I'm getting my head around the descendant selector stuff!

The bad news is that I thought that my new changes would get it all working properly, but when I checked it in both IE6 and IE7 but I can't tell because the subnavs are going beneath the content and the warranty button even though they both have lower z-index ratings than the subnavs. How could this be? Does IE not register z-index?

That's the idea you have set one generalized rule for an element first then after/later on you are more specific to cancel out the general rule on a element that you don't wish it apply to , sad thing is we do this as IE does not work with the selectors designed to allow this to done in a far more sensible clear fashion, e.g apply rule to the first child.

However quite often we do want to be quite general in a use of a descendant rule to target the majority of elements that fall within a selector it is a powerful method of applying properties to a large mass then where needed to pick out a single element deeper in a nesting that requires a change to those properties we get smaller leaner files this way that in theory are simpler to maintain and work with.

Actually your right IDing the ul is a good idea it helps to structure it makes it just a touch clearer as to what rules are applying to which elements and can shorten the length of those selectors.

Descendant selectors are all very well and the correct method of targeting elements 90% of the time but they can also become a bugger to read and keep track of, no more so when styling these nested type things.

Part of the key to this is to keep a really tight reign on the CSS rulesets, plenty of comments and despite my earlier remark about classes; ID and class the dam things to an inch of their lives if it helps keep order, hooks are useful to have anyway and can be used for other things on a navigation structure I like to have plenty available even if not used.

I haven't looked at your layout in IE but sadly it does manage to make a complete mess of the stacking order at times and is difficult to pin down as to exactly when and under what circumstance, happened to me the other day with a layout and two absolute elements, one that should have rendered over the top of the other but nothing I could do would make IE understand this fact all other browsers had no problem.

Hugo.

Microsoft is making a complete mess of two different parts of the page...

1) The subnavs want to sit behind the main content and the "register" button, despite their higher z-index value.

2) The bottom nav in my footer is refusing to sit in its place on the left, and is shifting over on top of the line on the right side.

Of course in the meantime, the client is crawling up my butt. GAH!

http://www.digitalpawprint.com/respiraide/respiraide.html

Tell your bloody client politely to get out of your posterior, clients just a flipping nuisance, why are they insisting on this style of menu it's not right, anyways...

Z-index on the #mainnav element that's the one that needs to be pulled up in the stacking context all it's children will take their position from it.

You have a problem where the .nav li li or .nav li li a is having a problem in inheriting the sub ul width .nav li li a{width:100px} adjusts things but causes problems with wrapping, it's a test as such you'll need to play with that I'm too tired to find that one at the moment.

All in all this menu layout couldn't be more of a pain in the butt, really can't help to have the client up there as well adding to the discomfort

As for the footer I just don't really know what's going on there but I dont really like the look of the rules at all even if it is working in FF, floating the main footer div or ul helps (can't remember which)but can't see where the text or is it images are getting jumbled. A list of links like this should cause no problems really.

I managed to resolve the issue with the footer, after playing around with it and trying different things. It appears to work in all browsers from what I can tell. Phew. One down, one to go.

Here's the problem I'm facing with the subnav... if I apply a specific width to the .nav li li or .nav li li a, the little box will be either too short (causing the words to wrap around and double-up in height) or will be too long, thereby taking up too much space, causing the entire ul to wrap around. Only if the list items are each their own personal width, will they fit in properly. Is there another way to do this?

http://www.digitalpawprint.com/respiraide/respiraide.html

I finally figured this one out... I guess it just had to stew in my brain for a day or two until the solution dawned upon me.

Each separate li (both subnav and subsubnav) were given their own class, and then each class specified a particular width for that one li.

It now works perfectly in FF, Safari, Opera, IE7, and IE6. Yay!

Thank you Hugo for all of your help in leading me to a new way of thinking, and nudging me to sort out the answers that you already knew were within me. I feel like I'm definitely getting the hang of this, and am feeling extremely pleased with myself at the moment.

In the immortal words of Homer Simpson, "I am so smart... S M R T... I am so smart... S M R T..."

great just lost my long Witty post, bloody spell check.

Well done though; knew you could get there and you did get there! we wus with you in spirit, as you say you have that feeling that you have reached a summit after a long uphill struggle but with new understanding you rest up a while and bask in that glory then look up at the next peak

Here's that missing 'A'