CODEWITHSUNDEEP
cssoverridingpaddinginheritance
user2132222
user2132222

Reputation: 49

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

enter image description here

Thanks.

Upvotes: 0

Views: 1202

Answers (2)

rocky
rocky

Reputation: 7696

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.

Upvotes: 0

Daniel Ursu
Daniel Ursu

Reputation: 459

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

This should solve your issue

Upvotes: 1

Related Questions