JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="box_1">
        <li class="hav_sub" data-main-id="99">111111111111111111</li>
        <li class="hav_sub" data-main-id="105">22222222222222222</li>
        <li class="hav_sub" data-main-id="23">333333333333333333</li>
        <li class="hav_sub" data-main-id="55">444444444444444444</li>
        <li class="hav_sub" data-main-id="66">555555555555555555</li>
        <li class="hav_sub" data-main-id="73">666666666666666666</li>
    </div>
    <div class="box_2">
        <div class="subcategory_box" data-id="99">1111 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
        <div class="subcategory_box" data-id="105">222 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div>
        <div class="subcategory_box" data-id="23">333 Lorem Ipsum - это текст-"рыба", часто используемый в...

CSS

.box {
  display:flex;
}
.hav_sub,
.subcategory_box {
    padding: 5px 15px;
}
.subcategory_box {
  display:none;
}
.subcategory_box.open{
  display:block;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  let elem = document.querySelector(".box_1");
  elem.addEventListener("mousemove", function({
    target
  }) {
    target = target.closest("[data-main-id]");
    if (target) {
      let id = target.dataset.mainId;
      let open = document.querySelector("[data-id].open")
      if (open) open.classList.remove("open");
      let sel = `[data-id="${id}"]`;
      document.querySelector(sel).classList.add("open")
    };

  });
  elem.addEventListener("mouseleave", function() {
    let open = document.querySelector("[data-id].open")
    if (open) open.classList.remove("open");
  })
})