13Foch,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.menu__item {
position: relative;
display: inline-block;
margin: 0 10px;
cursor: pointer;
}
.menu__item.menu__item--active {
background-color: silver;
}
.menu__menu-lvl2 {
position: absolute;
display: none;
top: 100%;
left: 0;
box-shadow: 1px 1px 30px 1px silver;
}
.menu__item.menu__item--active>.menu__menu-lvl2 {
display: block;
color: red;
}
</style>
<ul class="menu">
<li class="menu__item">
<div class="menu__name">item1</div>
<ul class="menu__menu-lvl2">
<li>item1__lvl2__item1</li>
<li>item1__lvl2__item2</li>
<li>item1__lvl2__item3</li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item2</div>
<ul class="menu__menu-lvl2">
<li>item2__lvl2__item1</li>
<li>item2__lvl2__item2</li>
<li>item2__lvl2__item3</li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item3</div>
<ul class="menu__menu-lvl2">
<li>item3__lvl2__item1</li>
<li>item3__lvl2__item2</li>
<li>item3__lvl2__item3</li>
</ul>
</li>
<li class="menu__item">
<div class="menu__name">item4</div>
</li>
</ul>
<script>
let current;
document.querySelector(".menu").addEventListener("click", function(event) {
let target = event.target;
if (target = target.closest(".menu__name")) {
event.preventDefault();
let parent = target.parentNode;
if (current && current !== parent) current.classList.remove("menu__item--active");
current = parent;
current.classList.toggle("menu__item--active");
}
});
</script>
</body>
</html>