Dropdown menu change two class in div on click

I have a code for submenu, where I need change, that I click on list, it will also add another class for <li class="dropdown"> and it would be class "test". It should work the same way it works for the submenu, it's a class for an active element where I need to have a colorful background.

Can help me someone please?!

var main = document.querySelector('.main');

main.addEventListener('click', accordion, false);

function accordion(e) {
  e.preventDefault();    
  if (e.target.tagName === 'A' && e.target !== e.currentTarget) { 
    var dropArray = Array.from(document.querySelectorAll('.dropdown-menu'));
    var tgt = e.target.nextElementSibling;
    if(tgt) {
      for (let drop of dropArray) {
        drop.classList.remove('show');
      }
      tgt.classList.add('show');
      tgt.classList.remove('hide');
    }
  }
  e.stopPropagation();
}

ul {
  list-style: none
}

.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: black;
  padding: 10px;
}

.test {
  background:red;
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px 10px;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  margin-left: 50px;
}

.dropdown .hide {
  max-height: 0;
}

<div class="container">
  <ul class='main'>
    <li class="dropdown test">
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu </a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>