Помогите доделать многоуровневое меню

const contents = document.querySelectorAll('.content');
const menu = [...document.querySelectorAll('.menu *:not(.head)')];

document.addEventListener('click', (event) => {
  const node = event.target;
  const child = node.nextElementSibling;
  if (node.classList.contains('head')) child.classList.toggle('active');
  if (!menu.includes(node)) {
    contents.forEach(c => c !== child && c.classList.remove('active'));
  }
});

* {
  margin: 0;
  padding: 0;
}

.menu {
  width: 200px;
}

.menu * {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column wrap;
  width: 100%;
  height: 60px;
  cursor: pointer;
}

.head {
  background-color: coral;
}

.content {
  display: flex;
  justify-content: space-between;
  height: 0px;
  background-color: #EEE;
  overflow: hidden;
  transition: all .2s;
  margin-bottom: 5px;
}

.content.active {
  height: 300px;
}

<div class="menu">
  <div id="main"></div>
  <div class="head">Годам</div>
  <div class="content"></div>
</div>
<script>
</script>