JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title></title>
</head>
<body>
<div class="dropdown">
            <a class="dropdown_button">「2」</a>
            <ul class="dropdown_content">
                <li><a href="http://google.co.uk">Edit</a></li>
                <li><a  href="http://yahoo.com">Stats</a></li>                                                                                                
            </ul>
       </div>
</body>


</html>

CSS

.dropdown { 
                display: inline;
                margin-right: 3px;
                margin-left: 3px;
            }
            .dropdown .dropdown_button { 
               padding:5px;
    margin:1em;
    display: inline-block;
    background-color:#c9c9c9;
    color:#444;
            }
            .dropdown.open .dropdown_button {
                 background-color:#444;
    color:#fff;
            }
            .dropdown .dropdown_content {
                display: none;
                position: relative;
    top:0px;
    background-color:#ccc;
            }
            .dropdown.open .dropdown_content {
                display: block;
            }
            .dropdown .dropdown_content li {
                list-style: none;
                margin-left: 0px;
                line-height: 16px;
                margin-top: 2px;
                margin-bottom: 2px;
            }
            .dropdown .dropdown_content li:hover {
                border-top-color: #3B5998;
                border-bottom-color: #3B5998;
                background: #444444;
            }
            .dropdown .dropdown_content li div { 
                display: block; 
                padding: 2px 7px;
                padding-right: 15px;
                color: black;
                text-decoration: none !important;
            }
            .dropdown .dropdown_content li:hover div {
                color: white;
                text-decoration: none !important; 
            }

JavaScript

$('.dropdown').each(function(){
                    $(this).find('.dropdown_button').bind('click',function(){
                        if($(this).parent().hasClass('open')){
                            $(this).parent().removeClass('open');
                        }else{
                            $('.dropdown.open').removeClass('open');
                            var o = $(this).parent().find('.dropdown_button').offset();
                            var h = $(this).parent().find('.dropdown_button').height();
                            $(this).parent().find('.dropdown_content').css({'top':(o.top+h-1),'left':o.left});
                            $(this).parent().addClass('open');
                        }
                    });    
                });
                $('.dropdown li').each(function(){
                    $(this).bind('click',function(){  
                        $('.dropdown.open').removeClass('open');
                    });
                });
                $(document).on('click', function(e) {
                    var $clicked = $(e.target);
                    if (!$clicked.parents().hasClass("dropdown")){
                        $('.dropdown.open').removeClass('open');
                    }
                });