Agapkin,
делайте пример минимальный, но с нужной структурой и классами сразу.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var leftmenu = $(".leftmenu");
leftmenu.on("click",function(event) {
if($(event.target).closest(".fm-menu-vertical").length) return;
leftmenu.not($(this).toggleClass("open-block-leftmenu"))
.removeClass("open-block-leftmenu")
})
});
</script>
</head>
<body>
<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" aria-hidden="true"></i>
<span>Как сделать заказ</span>
</a>
</li>
<li class="">
<a href="/about/status-client/" class="link">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>Статусы клиентов</span>
</a>
</li>
<li class="">
<a href="/about/question-answer/" class="link">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span>Вопрос-ответ</span>
</a>
</li>
</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" aria-hidden="true"></i>
<span>Как сделать заказ</span>
</a>
</li>
<li class="">
<a href="/about/status-client/" class="link">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>Статусы клиентов</span>
</a>
</li>
<li class="">
<a href="/about/question-answer/" class="link">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span>Вопрос-ответ</span>
</a>
</li>
</ul></div>
</body>
</html>