JSFiddle - React, Tailwind, and code Playground
HTML
<div id="lang_select">
<ul>
<li> <a href="#"> Language <i class="fa fa-angle-down"></i></a>
<ul>
<li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span></a>
</li>
<li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> French</span></a>
</li>
<li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> German</span></a>
</li>
</ul>
</li>
</ul>
</div>
CSS
#lang_select ul {
padding: 0px;
margin: 0;
border: solid 1px #e1e1e1;
width: 85px;
}
#lang_select li {
display: inline-block;
position: relative;
width: 100%;
}
#lang_select ul ul {
position: absolute;
display: none;
}
#lang_select li:hover ul {
display: block;
}
#lang_select a {
text-decoration: none;
color:#333;
font-family: Open Sans;
font-size:12px;
}
.lang-down {
padding-left:10px;
}