subNav li{width=100px;}...the subNav li still takes the property of the #nav li.

This is your code; I added outlines. Open this example page in your browser, then follow the two instructions written at the top of the page and observe the changes that take place on the screen.Both of these errors are important. Neither is trivial.

There are no semantic errors in your example code. There are 3 significant examples of 2 punctuation errors.

No screen captures appear in the previous post nor links to any.

What my example SHOWS is that if the punctuation in the example code that you posted is corrected, it works properly. Why the code on your web site does not work cannot be determined yet, but I would suggest taking another look at the ancestral code on your site. You will probably find a specificity issue. Just a guess because subColDbl is actually the third tier in the menu hierchy.

We have to wait until the css that you attached is approved.

In the meanwhile, your developer's tools should show which line of CSS is supplying the width to the errant <li>s.

Read a few articles where some developers don't even use ID's for this particular headache of precedence. Seems ok with me.

I'm not a big fan of ID's for that very reason. ID's are useful as hooks for JavaScript and targets for fragment identifiers, but for most other purposes, I prefer to use classes. I suspect that new coders use "id" instead of "class" simply because it's shorter and faster to write without understand the implications of its "weight".

#2. what you are referring as "hierarchy" .. forget it! it doesnt exist. Clear that out of your head.. no 'hierarchy'... cleared? is it out of your head? good! onto...[B]

3 CSS doesnt have hierarchy,[/B] but it does have SPECIFICITY. That is selectors are more targeted, more specific than others. This is kinda a trippy concept but lemme give you some basics and a few examples

a TAG , or any number of them,

li { your declaration....}

div li li { your declaration....}

is less specific than a class

.listItem { your declaration....}

by the same token and ID is more specific than any number of classes ,tags, or combination

so :

#anID{your declaration....}

trumps

.oList .listItem { your declaration....}

which trumps

ul li ul li { .listItem { your declaration....}

Some basics still apply 2 IDs beat one ID, 2 classes beat on class, 2tags beat one, a tag and a class beat a class by itself.. follow? [B]

4 yeah... well now conflicts will happen.[/B] This is what is happening in your code

#subNav li { your declaration....}
#nav li { your declaration....}

see it yet? They BOTH have the same specificity 1 ID + 1 tag... so CSS gets 'confused'. It applies the rule that comes LATER in your style sheet as the rule you want.

#5 Even if it worked, it's pretty sloppy. Precarious is a better word. Imagine one day you copy paste some rules about or ave to override something, and poof you switch the order accidentally. it's better to write selectors that are as specific as you need them to be ( but not too much)

since color and background are not declared in #nav li {}, it may be misleading to novices seeing that only the width and font-size #subNav li is coming out 'wrong' and with a border. But what is happening is perfectly normal ( in fact useful at times) and that is declarations that are latter in the code are added/overridden. In other words, in the sample above , only concurrent or absent declarations in #subNav li {} are affected by #nav li{}

[B]

7 Advanced basics pt.2:[/B]

IDs are pretty heavy. You can use them you can opt not to do so ... and sometimes they are unavoidable ( hooks for .js ). Remember that when you do use an ID you have made the MINIMAL requirement for targeting a descendant element using an ID.

#nav li { your declaration....}

ANY OTHER DESCENDANT LI you wish to target will require at least one ID and one tag in the rule.

for example if thought your you want page ALL sub list are pink:

.subNav{ background: pink; }

and you tossed this in

#nav li { background: orange;}

the sub lists of #nav will be orange and you will need an additional declaration