Question

I have some CSS that I’ve pieced together from a few sources, but my question is quite basic.

In this jsfiddle: http://jsfiddle.net/Ekbsb/1/ why does the outer div’s UL CSS take precedence over the “downstream” div’s UL rules?

To be specific:

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

is overwriting this code:

.ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}

Even though .ILdropdown ul is placed “lower” in the HTML. Isn’t this the opposite of how it should be working??

My goal is to replace the body ul code with something for this specific instance.

Thanks.

Answer 1

CSS ids (#) take precedence over classes (.)

Re-write it as follows:

#bodytopPan ul{margin:0px 0px 0px 25px; padding:0px;}

#bodytopPan .ILdropdown  ul{
    left: 0;
    margin: 5px 0;
}