JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<a class="enmenu" href="#">Settings</a>
<div class="ensettings">
    <ul>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 1</a></li>
    <li><a href="">Link 1</a></li>
    </ul>
</div>

CSS

.enmenu {
background: #d3d3d3;
display: inline-block;
padding:0px 10px;
position: relative;
cursor:pointer;
height:50px;
line-height:50px;
color: #D67625;
text-decoration: none;
border-radius:2px;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
}

.ensettings {
display:none;
position: absolute;
min-width: 150px;
background: #D67625;
color: #555;
top: 60px;
border-radius: 0 4px 4px 4px;
padding: 10px;
z-index: 999999;
border: 5px solid #D67625;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
}

.ensettings::before {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
position: absolute;
border-bottom: 5px solid #D67625;
top: -10px;
left: 10px;
}

.ensettings ul {
    padding: 0;
    margin: 0;
}

.ensettings ul > li {
    list-style:none;
}

.ensettings ul > li > a {
    text-decoration: none;
    color: #FFF;
    padding: 5px 10px;
}

JavaScript

jQuery(document) .ready(function() {	
$('.enmenu').on('click', function(){
		$('.ensettings').slideToggle('fast');
		return false;
	});
	$('body').on('click',function(){
		$('.ensettings').slideUp('fast');
	});
	$(".ensettings").click(function(e){
		e.stopPropagation();
	});
});