Problem with margin when using ID/CLASS defining LI in CSS

I am having problems using CSS and margins. I have a list that the li has a margin-bottom: 10px; but i want to deactivate this margin inside the list because I've a sub-list. It's a litle hard to explain, because English is 开发者_运维百科not my main language, but you can check the example of what happens.

Thank you in advance.

What you have is a specificity problem. Your 'general' (#content-sidebar li) style is more specific than your specific styles.

Here are a few articles going into more detail about CSS specificity

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Anyhoo, is this the effect you are looking for?

http://jsfiddle.net/ueyd5/10/

#content-sidebar li {margin-bottom:10px;}
#content-sidebar .content-sidebar-box {background:blue}
#content-sidebar .content-sidebar-submenu {background:red;}
#content-sidebar  .content-sidebar-submenu li {margin-bottom: 0;}

If I understand what you want correctly, then here's your answer. Your margin:0 wasn't overriding, because IDs always have priority over just classes. Add the ID in to the second call and you're golden.

On a side note, you don't need to wrap the sublists in a <div>. My fiddle, above also shows this.

@jquinn; just write this

#content-sidebar .content-sidebar-submenu li {margin-bottom: 0;}

in you css. the reason why this happening because #content-sidebar li is more specific or more powerfull then your .content-sidebar-submenu li

http://jsfiddle.net/sandeep/ueyd5/3/