JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-mnu">
  <ul>
    <li>
    <a href="#">Ссылка 1<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 1 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 2<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 2 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 3<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 3 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 4<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 4 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 5<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 5 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 6<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 6 ссылки
    </div>
    </li>

    <li>
    <a href="#">Ссылка 7<i class="mdi mdi-chevron-down f_right"></i></a>
    <div class="dropdown-block">
      Содержимое для 7 ссылки
    </div>
    </li>
  </ul>
</nav>

CSS

.main-mnu a.active {
  color: red;
}

JavaScript

var $dropdowns = $('.dropdown-block');
var $anchors = $('.main-mnu a');

function resetMenu() {
  $dropdowns.hide();
  $anchors.removeClass('active');
}

$anchors.on('click',function(e){
  var $link = $(this);
  var $dropdown = $link.siblings('.dropdown-block');

	e.preventDefault();

	if(!$link.hasClass('active')) {
  	resetMenu();
  	$dropdown.show();
  	$link.addClass('active');
  } else {
  	resetMenu();
  }
});

$(document).on('click', function(e){
	var $target = $(e.target);
  if(!$target.is($anchors) && !$target.is($dropdowns)) {
  	resetMenu();
  }
});

$dropdowns.hide();