i feel like i’m missing something with nested lists as menus… i find myself styling the uls, the ul lis, the ul lis as, the ul li uls, the ul li ul li as, maybe even some ul ul li a il lus? and it seems kinda disorganized and doesn’t quite make sense to me where which sorts of styles should go and whether they actually have to get split up like that. I think that inheritence rules also add another level of complexity. maybe i’m just botching it (have a look through my css and see if you agree perhaps). but is there a sort of rundown of general practices on that somewhere? example code is great, but hard to make generalized rules out of. if i can get this figured out i think i may write an article or something out of it.
also i’m having a bit of a related snafu with my slowly slowly being constructed site… i used this article as a guide to set up a php driven currentpage id, but having trouble using it as flexibly as i might like.
#menu#currentpage a{ will work,
but i’m trying to find a combination of ‘#menu#currentpage ul li ul li a’ so that the nested list can have a different style from the main list… (right now i have it styled for the nested ones, which works for the most part but you can see how it breaks on the ‘contact’ page since that’s the only top level page i have so far)
Well, instead of ul li ul li a can you shorten it to li li a?
Example:
#footermenu ul li ul li {padding:0px;}
#footermenu li li {padding:0px;} /* same thing */
Particularly if you have something with an ID at the top, it should be possible. Also, the inheritance really should make things easier. If this is for a navigation menu, then the colour, background, etc. stuff should stay the same, and only the odd extra bit should change (padding, border perhaps).
Also, an ID is unique, so this is redundant:
#menu ul li ul li #currentpage a{
color:#39F;
}
/* should be: */
#currentpage a {
color:#39F;
}
Styling nested lists is no different form styling nested divs or anything else for that matter. You just have to keep an eye on what level you are at.
In your code you have this:
#menu #currentpage a {
color:#700;
padding-left:2px;
}
#menu ul li ul[B] li #currentpage [/B]a {
color:#39F;
}
You were nearly right with the second rule but the id is attached to the list and you missed it. There would need to be another level for that to work.
It should be:
#menu #currentpage a {
color:#700;
padding-left:2px;
}
#menu ul li ul [B]li#currentpage[/B] a {
color:#39F;
}
However you don’t need to go overboard as you only need to be one level deeper than the first rule.
e.g.
#menu #currentpage a {
color:#700;
padding-left:2px;
}
#menu li li#currentpage a {
color:#39F;
}
or:
#menu #currentpage a {
color:#700;
padding-left:2px;
}
#menu[B] li #currentpage[/B] a {
color:#39F;
}
Whether you use ul li ul depends on whether you are targeting the ul or the list. uls will contain nested uls and lists will also contain nested lists. It all depends on what element you want to hit.
You could say “ul li ul” but “li ul” is shorter and targets the same element because a nested ul will always be inside a list element.
You could also say “li ul li” but “li li” would again be shorter.
The rules would be the same for nested divs and if you said div {color :red} you would over-ride the inner element with div div {color:blue}.
thanks for the clarification there… i’d never been aware that the id had to go right on the element like that… i had thought there could be spaces between when using ids or classes.
i’d never been aware that the id had to go right on the element like that
It doesn’t need to be attached to the element at all but saying “li #something” is not the same as saying “li#something”. “li #something” is equivalent to “li li#somwething” (assuming the second element is a list of course).
Although ids are unique to the page you are looking to style them differently depending on where they appear so you must have a correct path to make it happen:)
This was trouble I had when I first went into dropdowns… the first ones I’d ever used were Stu Nichols’, and it confuzled me to no end.
What helps is using the same system and maybe the same order for every dropdown you use. I also indent children (I haven’t seen anyone else do this, so it’s just me, but helps me read).
/*top level stuff... even if it trickles down to hit sub levels*/
ul {
styles;
}
li {
styles;
}
li.class {
special styles;
}
ul a {
styles;
}
ul a:focus, ul a:hover {
styles;
}
ul ul {
sub styles;
usually off-screen;
}
ul ul li {
sub li styles;
}
/*only mention if they need to be different from mains*/
ul ul a {
sub anchor styles;
}
/*only mention if they need to be different from mains*/
ul ul a:focus, ul ul a:hover {
sub anchor styles;
}
li:hover ul {
subs onscreen;
}
(if you're making it keyboard accessible it gets more complicated)
Whatever, every dropdown you find out there looks a little different, but it will make the most sense to you if you always or almost always use the same order and the same style of selector usage (if you use “ul ul” to refer to the sub ul then don’t later switch to “li ul” etc).
