JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="clickMenu3">Пункт
    <ul class="hide3">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
    <li class="clickMenu">Пункт
      <ul class="hide">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
    <li class="clickMenu2">Пункт
     <ul class="hide2">
        <li>Подпункт</li>
        <li>Подпункт</li>
      </ul>
    </li>
  </ul>

CSS

.hide, .hide2, .hide3{
  display: none;
}

ul{
  padding: 0;
}

li {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  text-align: center;
  margin-top: 10px;
  width: 70px;
}

JavaScript

var clickMenu = document.querySelector(".clickMenu");
var ulClass = document.querySelector(".hide");

var clickMenu2 = document.querySelector(".clickMenu2");
var ulClass2 = clickMenu2.querySelector(".hide2");

var clickMenu3 = document.querySelector(".clickMenu3");
var ulClass3 = clickMenu3.querySelector(".hide3");


clickMenu.addEventListener("click", function(){
	if(ulClass.style.display = 'none'){
 			ulClass.style.display = 'block'
    	if(ulClass2.style.display = 'block'){
      	ulClass2.style.display = 'none'
        ulClass3.style.display = 'none'
      }
  	}
});

clickMenu2.addEventListener("click", function(){
	if(ulClass.style.display = 'block'){
 			ulClass.style.display = 'none'
    	ulClass2.style.display = 'block'
  	}
});

clickMenu3.addEventListener("click", function(){
	if(ulClass3.style.display = 'none'){
 			ulClass3.style.display = 'block'
   		if(ulClass.style.display = 'block'){
      	ulClass.style.display = 'none';
  			ulClass2.style.display = 'none';
      }
  	}
});