JSFiddle - React, Tailwind, and code Playground

HTML

<div class="leftmenu block">
	<i class="fa fa-question" aria-hidden="true"></i>
	<h3>lalala</h3>
    <ul class="nav fm-menu-vertical level-1">

    </ul>
</div>
  
  <div class="leftmenu block">
	<i class="fa fa-question" aria-hidden="true"></i>
	<h3>Сервис и помощь</h3>
	 <ul class="nav fm-menu-vertical level-1">
	
					<li>
				<a data-toggle="collapse" href="#menu225206965" class="link fake collapsed" aria-expanded="false">
					<i class="fa fa-shopping-bag" aria-hidden="true"></i>
					<span>Обувь</span>
				</a>
															<div class="collapse" id="menu225206965" aria-expanded="false" style="height: 0px;">
							<ul class="nav level-2">
																	<li class="parent">
										<a href="/about/shoes/care-shoes/" class="link">
											<i class="fa " aria-hidden="true"></i>
											<span>Уход за обувью</span>
										</a>
									</li>
																	<li class="parent">
										<a href="/about/shoes/choose-size/" class="link">
											<i class="fa " aria-hidden="true"></i>
											<span>Как подобрать размер</span>
										</a>
									</li>
																	<li class="parent">
										<a href="/about/shoes/size-chart/" class="link">
											<i class="fa " aria-hidden="true"></i>
											<span>Таблица размеров</span>
										</a>
									</li>
															</ul>
						</div>
												</li>
		
	
					<li class="">
				<a href="/about/color/" class="link">
					<i class="fa fa-eyedropper" aria-hidden="true"></i>
					<span>Цвет</span>
				</a>
			</li>
		
	
					<li class="">
				<a href="/about/bonus-system/" class="link">
					<i class="fa fa-rub" aria-hidden="true"></i>
					<span>Бонусная система</span>
				</a>
			</li>
		
	
					<li class="">
				<a href="/about/make-return/" class="link">
					<i class="fa fa-refresh" aria-hidden="true"></i>
					<span>Как сделать возврат</span>
				</a>
			</li>
		
	
					<li class="">
				<a href="/about/make-order/" class="link">
					<i class="fa fa-calculator"...

CSS

.leftmenu.block{
margin-top:15px;
width:100px;
height:100px;
background:green;
display:block;
position: relative;
}
.nav.fm-menu-vertical {
  display: none;
}
.leftmenu.block.open-block-leftmenu .nav.fm-menu-vertical {
    position: absolute;
    display: block;
    top: 50px;
    left: 100%;
    width: 300px;
    height: 100px;
    background: red;
}

JavaScript

/*(function() {
	var menuClicked = false;
	$(".leftmenu.block").click(function(){
  	var $this = $(this);
		if ($this.hasClass("open-block-leftmenu")) {
    	if (menuClicked) {
      	menuClicked = false;
      } else {
				$this.removeClass("open-block-leftmenu");
      }
		} else {
			$(".leftmenu.block.open-block-leftmenu").removeClass("open-block-leftmenu");
			$this.addClass("open-block-leftmenu");
		}
	}).on("click", ".nav.fm-menu-vertical", function() {
  	menuClicked = true;
  });
})();*/



$(function() {
  var leftmenu = $(".leftmenu");
  leftmenu.on("click",function(event) {
  if($(event.target).is(".nav.fm-menu-vertical")) return;
  leftmenu.not($(this).toggleClass("open-block-leftmenu"))
  .removeClass("open-block-leftmenu")
})
});