<menu>
    <ul>
        <li><a class="menu-item" href="#">Пункт меню 1</a></li>
        <li><a class="menu-item" href="#">Пункт меню 2</a></li>
      </ul>       
</menu>

<div class='dropdown-menu'></div>

a,
ul,
li {
  text-decoration: none;
  list-style-type: none;
  color: #000;
}

.dropdown-menu {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;

  &__item + &__item {
    margin-top: 1em;
  }

  &__title {
    font-size: 2em;
    color: green;
  }

  &__link {
    border-bottom: 1px dashed red;
  }
}

const data = [
  [
    {
      title: "Заголовок-1-1",
      items: [
        { text: "Пункт-1-1-1", url: "#" },
        { text: "Пункт-1-1-2", url: "#" }
      ]
    },
    {
      title: "Заголовок-1-2",
      items: [
        { text: "Пункт-1-2-1", url: "#" },
        { text: "Пункт-1-2-2", url: "#" }
      ]
    }
  ],
  [
    {
      title: "Заголовок-2-1",
      items: [
        { text: "Пункт-2-1-1", url: "#" },
        { text: "Пункт-2-1-2", url: "#" }
      ]
    },
    {
      title: "Заголовок-2-2",
      items: [
        { text: "Пункт-2-2-1", url: "#" },
        { text: "Пункт-2-2-2", url: "#" }
      ]
    }
  ]
];

// -------------------------------------------------------

const menuContainer = document.querySelector(".dropdown-menu");
const menu = document.querySelector("menu");

menu.addEventListener("click", ({ target }) => {
  if (!target.classList.contains("menu-item")) return;

  const menuLi = target.closest("li");
  const menuUl = menuLi.parentElement;

  const index = [...menuUl.children].findIndex(li => li === menuLi);
  if (index < 0) return;

  renderMenuItems(data[index], menuContainer);
});

function renderMenuItems(menuItems, container) {
  if (!menuItems || !container) return;

  const newUl = document.createElement("ul");
  newUl.classList.add("dropdown-menu__items");

  menuItems.forEach(({ title, items }) => {
    const li = document.createElement("li");
    li.classList.add("dropdown-menu__item");
    newUl.appendChild(li);

    li.innerHTML =
      `<div class="dropdown-menu__title">${title}</div>` +
      items
        .map(itm =>`<a href=${itm.url} class="dropdown-menu__link">${itm.text}</a>`)
        .join(" 😺 ");
  });

  const oldUl = container.querySelector(".dropdown-menu__items");

  if (oldUl) {
    container.replaceChild(newUl, oldUl);
  } else {
    container.appendChild(newUl);
  }
}