<style type="text/css">
.navbar {
display:flex;
flex-direction:row;
position:absolute;top:300px;
}

.menu-item {
display:block;
padding:10px;
background-color:#ccc;
}

.dropdown {
position:relative;
}

.dropdown .dropdown-menu,
.dropdown.show .dropdown-menu {
position:absolute;
bottom:100%;
left:0px;
border:1px solid #c0c0c0;
display:none;
}

.dropdown.show .dropdown-menu{
display:block;
}

.blue {
background-color:blue;
}

</style>

<div class="navbar">
<a href="#none" class="menu-item">menu1</a>
<a href="#none" class="menu-item">menu1</a>
<div class="blue dropdown">
    <a href="#none" class="menu-item dropdown-toggle">dropdown1</a>
                <div class="dropdown-menu">
    <a href="javascript:{alert('menu1');}" class="menu-item">menu1</a>
    <a href="#none" class="menu-item">menu1</a>
                </div>
</div>

<div class="dropdown blue">
    <a href="#none" class="menu-item dropdown-toggle">dropdown2</a>
                <div class="dropdown-menu">
    <a href="javascript:{alert('menu2');}" class="menu-item">menu2</a>
    <a href="#none" class="menu-item">menu2</a>
                </div>
</div>

</div>
<script>
document.addEventListener("click", function(e){
    var srcNode = e.target;
    let isToggle = srcNode.classList.contains("dropdown-toggle");
    let parentNodeIsDropdown = srcNode.parentNode && srcNode.parentNode.classList.contains("dropdown");
    if(isToggle && parentNodeIsDropdown) {
        let menuIsDisplay = srcNode.parentNode.classList.contains("show");
        if(menuIsDisplay) {
            srcNode.parentNode.classList.remove("show");
        }
        else {
            var menusDisplayed = document.getElementsByClassName("dropdown show");
            while(menusDisplayed && menusDisplayed.length > 0)  {
                menusDisplayed[0].classList.remove("show");
            }
            srcNode.parentNode.classList.add("show");
        }
    }
    else {
        var menusDisplayed = document.getElementsByClassName("dropdown show");
        while(menusDisplayed && menusDisplayed.length > 0){
            menusDisplayed[0].classList.remove("show");
        }
    }
});
</script>