how can I change top-margin the right way if multiple css class assigned?

Question

I assigned these classes menu second_menu menu_about_author to ul so the html code looks like <ul class="menu second_menu menu_about_author"> I wanted this ul to have the same properties like menu and second_menu and then I wanted to move the menu_about_author little bit down.

I did so by .menu_about_author { margin-top:40px; } but it didn't work

any idea why the margin-top:40px; is crossed? the link to the image is [1]: http://img153.imageshack.us/img153/882/58daeef0c3c846e4a8d6321.png

Answer 1

use

.custom .menu.second_menu.menu_about_author { margin-top:40px; }

or

.custom .second_menu.menu_about_author { margin-top:40px; }

as selector

otherwise your margin is overwritten by the second_menu margin

probably also

.custom .menu_about_author { margin-top:40px; }

will work if this code is after .custom .second_menu

Answer 2

Because .custom .second_menu has higher Specificity than .menu_about_author

In other words, .custom .second_menu is more specific than .menu_about_author, so it take priority.

You can learn about this here...

http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

You can solve the problem by doing something like this...

.custom .menu_about_author

or

.custom ul.menu_about_author

Other answers also have suggestions that will work by making your author entry more specific.

Answer 3

To quickly se if its an inheritance problem, you can use !important

.menu_about_author { margin-top:40px !important; }