Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS a:hover not applying to margin-top! Re: a:hover not applying to margin-top!

#108459
stinkyboomboom
Participant

I believe this is due to margin collapsing. Specifically:

“Margin collapsing happens wherever two (or more) top or bottom margins are touching. The basic idea is that when they touch, instead of getting the sum of the two margins, the bigger one is used, and the other is ignored.”

If you remove the margin-top in #aboutNav, it works. However, it’s really jumpy, since you’re using a margin and it pushes the links layout below the user’s mouse (no longer hovering). I think to pull off what you want, just switch:

#aboutNav a:hover {
margin-top:57px;
}

to:

#aboutNav a:hover {
padding-top:57px;
}

Then you won’t have any collapsing, and the padding will keep the link’s layout where the mouse is when padding occurs on hover, so no jumping.
Hope that helps.