JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-wr">
  <a class="nav-link h menu-link">МЕНЮ 1
    <div class="vision us-menu">
        <ul>
            <li>.....</li>
        </ul>
    </div>
  </a>
  <a class="nav-link h menu-link">МЕНЮ 1
    <div class="vision us-menu">
        <ul>
            <li>.....</li>
        </ul>
    </div>
  </a>
  <a class="nav-link h menu-link">МЕНЮ 1
    <div class="vision us-menu">
        <ul>
            <li>.....</li>
        </ul>
    </div>
  </a>
</div>

CSS

body {
  width: 500px;
  height: 500px;
  background: yellow;
}

.us-menu {
  display: none;
}

.menu-link {
  display: block;
  background: red;
  margin-bottom: 5px;
}

.menu-wr{
  width: 100px;
}

JavaScript

jQuery(function($){
	$(function(){
  
  	var 
    	menuWrClass   = '.menu-wr',
      menuLinkClass = '.menu-link',
      usMenuClass   = '.us-menu';
  
  	$('body').on('click', function(e){
    	if($(menuWrClass).is(e.target) || $(menuWrClass).has(e.target).length > 0){
      	return false;
      }
      $(usMenuClass).hide();
    });
    
    $(menuLinkClass).on('click', function(){
    	var currentUsMenu = $(this).find(usMenuClass);
      $(usMenuClass).hide();
      $(currentUsMenu).show();
    });
  
  
  });
});