Jimmi,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active > a{
color: hsla(120, 100%, 40%, 1);
}
.ul-free li:first-child, .li-one.active > a{
font-weight: bold;
font-size: 1.2em;
margin-top: 5px;
}
</style>
<script>
document.addEventListener( "click" , ({target}) => {
const selector = ".li-one .ul-free li";
if(target = target.closest(selector)) target.closest(".li-one").classList.add("active");
});
</script>
</head>
<body>
<ul class="ul-one">
<li class="li-one">
<a href="#">Пункт #1</a>
<ul class="ul-two">
<ul class="ul-free">
<li><a href="#">Подпункт #1</a></li>
<li><a href="#">Подпункт #2</a></li>
<li><a href="#">Подпункт #3</a></li>
<li><a href="#">Подпункт #4</a></li>
</ul>
<ul class="ul-free">
<li><a href="#">Подпункт #5</a></li>
<li><a href="#">Подпункт #6</a></li>
<li><a href="#">Подпункт #7</a></li>
<li><a href="#">Подпункт #8</a></li>
</ul>
<ul class="ul-free">
<li><a href="#">Подпункт #9</a></li>
<li><a href="#">Подпункт #10</a></li>
<li><a href="#">Подпункт #11</a></li>
<li><a href="#">Подпункт #12</a></li>
</ul>
<ul class="ul-free">
<li><a href="#">Подпункт #13</a></li>
<li><a href="#">Подпункт #14</a></li>
<li><a href="#">Подпункт #15</a></li>
<li><a href="#">Подпункт #16</a></li>
</ul>
</ul>
</li>
</ul>
</body>
</html>
|