<nav class="menu-menyu-v-shapke-container">
  <ul>
    <li class="current-menu-item"><a href="#">Главная</a></li>
    <li class="menu-item-has-children"><a href="#">Раздел 1</a>
      <ul class="sub-menu">
        <li><a href="#">Заголовок 1</a></li>
        <li class="menu-item-has-children"><a href="#">Заголовок 2</a>
          <ul class="sub-menu">
            <li><a href="#">Заголовок 2.1</a></li>
            <li><a href="#">Заголовок 2.2</a></li>
          </ul>
        </li>
        <li><a href="#">Заголовок 3</a></li>
        <li><a href="#">Заголовок 4</a></li>
        <li><a href="#">Заголовок 5</a></li>
        <li><a href="#">Заголовок 6</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children"><a href="#">Раздел 2</a>
      <ul class="sub-menu">
        <li><a href="#">Заголовок 1</a></li>
      </ul>
    </li>
  </ul>
</nav>

<nav class="menu-menyu-v-shapke-container">
  <ul>
    <li class="current-menu-item"><a href="#">Главная</a></li>
    <li class="menu-item-has-children"><a href="#">Раздел 1</a>
      <ul class="sub-menu">
        <li><a href="#">Заголовок 1</a></li>
        <li class="menu-item-has-children"><a href="#">Заголовок 2</a>
          <ul class="sub-menu">
            <li><a href="#">Заголовок 2.1</a></li>
            <li><a href="#">Заголовок 2.2</a></li>
          </ul>
        </li>
        <li><a href="#">Заголовок 3</a></li>
        <li><a href="#">Заголовок 4</a></li>
        <li><a href="#">Заголовок 5</a></li>
        <li><a href="#">Заголовок 6</a></li>
      </ul>
    </li>
    <li class="menu-item-has-children"><a href="#">Раздел 2</a>
      <ul class="sub-menu">
        <li><a href="#">Заголовок 1</a></li>
      </ul>
    </li>
  </ul>
</nav>
html { font-size: 20px; font-family: Arial;}
body { margin: 50px; }
a { color: #339; }
.current-menu-item a { color: #c33; }

.menu-item-has-children .sub-menu { overflow: hidden; height: 0; opacity: 0; transition: all 0.5s ease-in; }
.menu-item-has-children.show > .sub-menu { overflow: visible; height: auto; opacity: 1; }
nav ul,ol,li{ list-style-type:none; }
nav > ul { padding-left: 0; }

.menu-item-has-children > a {
  padding: 10px 15px 10px 25px;
  cursor: pointer;
  position: relative; }

.menu-item-has-children > .arrow {
  position: absolute;
  width: 1em;
  height: 1em;
  background-color: #339;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320.86 25.89c14.64-12.03 37.17-13.46 53.59-4.38 7.38 5.56 14.93 11.24 20.41 18.8l.2 2.42c11.2 17.51 6.74 42.34-7.35 57-42.07 42.24-84.34 84.31-126.44 126.53-10.57 12.12-15.16 31.41-7.33 46.09.02.59.08 1.78.1 2.38 1.3 1.87 3.24 3.46 3.17 5.93 40.95 43.34 84.19 84.58 126.04 127.1 10.73 9.34 18.63 22.64 17.82 37.24 1.29 22.63-15.94 43.98-37.5 49.69-16.05 4.02-34.88.88-46.4-11.86-58.9-58.69-116.82-118.53-175.83-177.15-8.04-10.83-20.47-18.23-26.4-30.6-7.52-16.1-4.85-36.69 7.33-49.83 66.5-66.16 131.58-133.68 198.59-199.36z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M320.86 25.89c14.64-12.03 37.17-13.46 53.59-4.38 7.38 5.56 14.93 11.24 20.41 18.8l.2 2.42c11.2 17.51 6.74 42.34-7.35 57-42.07 42.24-84.34 84.31-126.44 126.53-10.57 12.12-15.16 31.41-7.33 46.09.02.59.08 1.78.1 2.38 1.3 1.87 3.24 3.46 3.17 5.93 40.95 43.34 84.19 84.58 126.04 127.1 10.73 9.34 18.63 22.64 17.82 37.24 1.29 22.63-15.94 43.98-37.5 49.69-16.05 4.02-34.88.88-46.4-11.86-58.9-58.69-116.82-118.53-175.83-177.15-8.04-10.83-20.47-18.23-26.4-30.6-7.52-16.1-4.85-36.69 7.33-49.83 66.5-66.16 131.58-133.68 198.59-199.36z'/%3E%3C/svg%3E");
  margin-top: 2px;
  transform: rotate(-90deg);
}

.menu-item-has-children.show > a { margin-bottom: 2px; }

.menu-item-has-children.show > .arrow {
  transform: rotate(180deg);
  background-color: red; }

.menu-item-has-children a:hover { color: #7409f3; }
let el = document.getElementsByClassName('menu-item-has-children');
for(let i = 0; i < el.length; i++ ){
  el[i].addEventListener('click', showSub, false);
  let wrap = document.createElement('span');
  wrap.classList.add('arrow');
  el[i].prepend(wrap);
}

function showSub(event){
  for(let x = 0; x < el.length; x++ ){
    if(el[x] != this) {
      let node = this;
      let isParent = false;
      while(node.tagName != 'NAV'){
        if(node == el[x]) { isParent = true; break; }
        node = node.parentNode;
      }
      if(!isParent) { el[x].classList.remove('show'); }
    } else {
      this.classList.toggle('show');
    }
  }
  event.stopImmediatePropagation();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.