Home › Forums › CSS › a:hover not applying to margin-top! › Re: a:hover not applying to margin-top!
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.