JSFiddle - React, Tailwind, and code Playground

HTML

<div id="skype">
<a href="#" class="skypelink">Skypename</a>
<ul id="skypemenu">
    <li><a href="#">Call</a></li>
    <li><a href="#">Chat</a></li>
</ul>
</div>

CSS

#skype {
 overflow: hidden;
 float: left;
 
}
#skype a.skypelink {
 float: left;
 background-color: #f9f9f9;
 color: #000; 
 text-decoration: none;
 padding: 3px;
 border: 2px solid #000;
}
#skypemenu {
clear: left;
width: 100px;
margin-left: -100px;
}
#skypemenu a {
 border: 1px solid #000;
 background-color: #ddd; 
 display: block;  
}

JavaScript

$(document).ready(function(){
    $("#skype").hover(function(){
        $("#skypemenu").animate({
            marginLeft : "0"});
    },function(){
        $("#skypemenu").animate({
            marginLeft : "-100"});
    });    
});