JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<drop-down class="dropdown">
    <span>Dropdown menu<i class="fa fa-cog"></i></span>
    <div id="ulwrap">
    </div>
        <ul>
            <li>
                <a href="#">Github<i class="fa fa-github"></i></a>
            </li>
            <li>
                <a href="#">BitBucket<i class="fa fa-bitbucket"></i></a>
            </li>
            <li>
                <a href="#">Dropbox<i class="fa fa-dropbox"></i></a>
            </li>
            <li>
                <a href="#">Google drive<i class="fa fa-google"></i></a>
            </li>
        </ul>
</drop-down>

CSS

body {
    display: flex;
    justify-content: center;
    padding: .5rem;
}
drop-down {
	background-color: #e9e9e9;
	border: 1px solid #d2c2c2;
	border-radius: 2px;
	display: flex;
	flex-flow: column nowrap;
	height: 40px;
	justify-content: center;
	position: relative;
	width: 160px;
}
drop-down:hover { cursor: pointer; }
drop-down > span {
	align-items: center;
	color: #555;
	display: flex;
	font-family: 'segoe ui';
	font-size: .9rem;
	justify-content: space-between;
	padding: 0px .75rem;
	pointer-events: none;
}
drop-down > span > i {
	color: inherit;
}
drop-down ul {
	background-color: #e9e9e9;
	border: 1px solid #d2c2c2;
	border-radius: 2px;
	box-shadow: 0px 2px 5px 1px rgba(0,0,0,.15);
	display: block;
	right: 10%;
    top:160%;
	list-style: none;
	padding: .5rem 0;
	position: absolute;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: all .2s ease-out;
	width: 100%;
	z-index: 999;
}
drop-down ul > li {
	color: #555;
	display: block;
}
drop-down ul > li:hover {
	background-color: #007095;
	color: rgba(255,255,255,.9);
}
drop-down ul > li > a {
	align-items: center;
	color: inherit;
	display: flex;
	font-family: 'segoe ui';
	font-size: .95rem;
	justify-content: space-between;
	padding: .5rem .75rem;
	text-decoration: none;
}
drop-down ul > li > a > i {
	color: inherit;
}
drop-down:focus {
	outline: none;
}
drop-down:hover ul, #ulwrap:hover ul {
	pointer-events: auto;
	opacity: 1;
    top:120%;
	visibility: visible;
}
#ulwrap {
	display: block;
    height:0;
    width:100%;
    position:absolute;
}
drop-down:hover #ulwrap, #ulwrap:hover {
    height:100px;
}