Toogle then visibility of a div by hovering on the corresponding nav-item with JS

I have a mega-menu-dropdown which has 2 columns. Column 1 has a list of terms and by hovering on the terms (mouse-in) the corresponding div should become visible.

Also the first combination of list-item and corresponding div should be visible when entering the dropdown.

This is what I have so far:

document.addEventListener("DOMContentLoaded", function(event) {
  let ktnavList = document.querySelector(".mm-dropdown--nav").children;
  let ktcatList = document.querySelector(".mm-dropdown--cat").children;
    for (let i=0; i<ktnavList.length; i++) {
      let li = ktnavList[i];
      let cat = ktcatList[i];
      li.addEventListener('mouseenter', () => {
      cat.classList.toggle('active-item');
      });
      li.addEventListener('mouseleave', () => {
      cat.classList.toggle('active-item');
      });
   };
});

I can toogle all items except the first one.
I need the first div to hide when hovering on the second list-item but to become visible again when entering the dropdown again (that should be the standard state of the dropdown).

I also think I don’t need the ‘mouseleave’ part. Because it will prevent the user to access the contents of the divs (more navigation elements).

Desired behavior would be that if I hover above one list item all the other divs belonging to the other list-items would hide (toogle class ‘active-item’).

I don’t know how to toggle all other divs that are not attached to the ‘mouseenter’.

Thanks in advance.