miha2020,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.item>.arrow+ul {
display: none;
}
.item.active>.arrow+ul {
display: block;
}
.cross:after {
content: "X";
text-align: right;
display: block;
width: 100px;
}
</style>
</head>
<body>
<ul class="menu-left">
<li class="item"><a class="arrow" href="/test/test/">Пример</a>
<ul class="subs">
<span class="cross"></span>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
</li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a>
<ul class="subs">
<span class="cross"></span>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item-2"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
</li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
<li class="item"><a class="arrow" href="/test/test/">Пример</a></li>
</ul>
<script>
let dropdown = document.querySelectorAll('.menu-left>li.item');
let menu = document.querySelector('.menu-left');
let mediaQuery = window.matchMedia('(min-width: 768px)');
console.log(mediaQuery);
['mouseover', 'click'].forEach(e => {
menu.addEventListener(e, function(e) {
let arrow = e.target.matches('.item > .arrow');
let close = e.target.matches('.item .cross');
let li = e.target.closest('li.item');
if (arrow && (mediaQuery.matches || e.type == 'click')) {
event.preventDefault();
dropdown.forEach(e => e == li ? e.classList.add('active') : e.classList.remove('active'))
}
if (close && e.type == 'click') li.classList.remove('active');
});
});
</script>
</body>
</html>