Эффект зависания на li - применяется ко всем из них

Не мог придумать хороший способ рассказать о моем вопросе.

Вот дизайн, о котором идет речь

Я хочу, чтобы баннеры в социальных сетях в правом верхнем углу спускались вниз, когда вы наводили на себя над каждым из них. Я использую margin-top, чтобы сделать это, и каждый баннер является элементом списка.

Когда я нависаю над одним из изображений, все остальные тоже сбрасываются!

Мой вопрос: как я могу сделать это так, чтобы тот, на котором курсор был единственным, который перемещается вниз?

HTML:

<ul id="social-media">
 
 
 
</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; }

Заранее спасибо!

1 ответ

Добавьте vertical-align:top к элементам li. Это гарантирует правильность выравнивания элементов, в противном случае он использует базовый уровень и производит эффект, который вы видите.

licensed under cc by-sa 3.0 with attribution.