JSFiddle - React, Tailwind, and code Playground

HTML

<div class="socials">
    <ul>
        <li id="tweeter"><a href="" target="_blank"><i class="icon icon-twitter">Twitter</i>
            <ul class="subicons">
                <li><a href="" target="_blank">a</a></li>
                <li><a href="" target="_blank">a</a></li>
                <li><a href="" target="_blank">a</a></li>
            </ul>
        </a></li>
    <li><a href="" target="_blank"><i class="icon icon-linkedin">Linkedin</i></a></li>
    </ul>
</div>

CSS

.socials:after {
    content:"";
    display:table;
    clear:both;
}
.socials {padding-top:200px;position:relative;}
body {
    padding-top:100px;
    padding-left:100px;
}
ul li {
    float: left;
    display: block;
    position:relative;
}
ul li a i {
    background:grey;
    text-indent:-99999px;
    display: block;
    width: 32px;
    height: 32px;
    margin: 3px;
}
ul li ul {
    display:none;
    position:absolute; 
    background:red; 
    top:-75px;
    padding:10px;
    margin:0;
    width:200px;
    left:50%;
    margin-left:-100px;
}
/*ul li:hover ul {
    display:block;
}*/
ul li ul li {display:inline-block; background:yellow; margin:0 10px; width:32px; height:32px; }

JavaScript

$('#tweeter').on({
    mouseenter : function(e){
        var $this = $(this);
        clearTimeout($this.data('_timer'));
        $(this).find('ul').show();
    },
    mouseleave : function(){
        var $this = $(this);
        $this.data('_timer', setTimeout(function(){
            $this.find('ul').hide();
        },1000))
    }
});