JSFiddle - React, Tailwind, and code Playground

HTML

<div style="float:left;">
    <a href="javascript:void(0)" class="button" onclick="showElement('v-menu'); event.stopPropagation()">
        <span>Monitoring</span></a>
    <ul id="v-menu" class="v-menu" style="display:none;" >
        <li><a href="#" onclick="showElement('v-menu')">Start</a></li>
        <li><a href="#">Stop</a></li>
    </ul>
</div>

JavaScript

function showElement(layer) {
    var myLayer = document.getElementById(layer);
    if (myLayer.style.display == "none") {
        myLayer.style.display = "block";
        myLayer.backgroundPosition = "top";
    } else {
        myLayer.style.display = "none";
    }
}

document.addEventListener("click", function(event) {
    var menu = document.getElementById('v-menu');
    if (menu.style.display == 'block') 
        menu.style.display = "none";
});