Тема: hover-ефект при наведенні на спозиціонований елемент
Загалом ось код:
HTML
<ul class="social">
<li><a href="#"><i class="fa fa-facebook facebook-icon"></i></a></li>
<li><a href="#"><i class="fa fa-vk vk-icon"></i></a></li>
<li><a href="#"><i class="fa fa-twitter twitter-icon"></i></a></li>
<li><a href="#"><i class="fa fa-rss rss-icon"></i></a></li>
</ul>CSS
.social {
position: fixed;
top: 180px;
right: 0;
}
.social i {
width: 45px;
padding: 12px 0;
}
.facebook-icon {
background-color: #3b5998;
}
.vk-icon {
background-color: #507299;
}
.twitter-icon {
background-color: #1da1f2;
}
.rss-icon{
background-color: #fe7a23;
}
.facebook-icon:hover,
.vk-icon:hover,
.twitter-icon:hover,
.rss-icon:hover {
width: 80px;
}По моєму плану при наведенні іконка має красиво виїжджати( 
), але виходить таке неподобство:
Розумію чого так виходить, але не можу виправити проблему. Перелазив весь гугл й так і не зміг знайти такого меню, щоб подивитися як реалізовано(Хоча раніше завжди на нього натикався, 
).
Може хто знає як зробити так, щоб при наведенні на іконку вона "розширялася", а інші залишалися на місцях. Буду дуже вдячний! 
