Hover effect on li - applies to all of them

Hover effect on li - applies to all of them

Couldn't think of a good way to word my question.
Here is the design in question
I want it so that the social media banners at the top right move down when
you hover over each one of them. I'm using margin-top to do that and each
banner is a list item.
When I hover over one of the images, all of the other ones drop down too!
My question is: how can I make it so that the one that the cursor on is
the only one that moves down?
HTML:
<ul id="social-media">
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
<li><a href="#"><img></a></li>
</ul>
CSS:
#social-media {
float: right;
margin: 0px;
margin-left: 80%;
position: absolute;
}
#social-media li { display: inline-block; margin-top: -15px; }
#social-media li:hover { margin-top: 0; }
Thanks in advance!