<nav>
    <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: green; }
 
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){     
  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.