CSS padding keeps inheriting

问题

I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.

I've tried overriding the styles using !important, and moving the css to different levels. Anyone got a clue about whats going on here?

This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp

Thanks.

回答1:

#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}

This should solve your issue

回答2:

This is expected behavior. Paddings are added relatively.

If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).

If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.

来源：https://stackoverflow.com/questions/15761331/css-padding-keeps-inheriting