JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>
    <a href="">Category > </a>
    <ul class=sub-menu>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
  <li>
    <a href="">Category > </a>
    <ul class=sub-menu>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
  <li>
    <a href="">Category > </a>
    <ul class=sub-menu>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
      <li>Sub-menu</li>
    </ul>
  </li>
</ul>

CSS

ul {
  column-count: 4;
  column-gap: 60px;
  column-rule: 1px solid black;
}

ul li {
  list-style: none;
  position: relative;
}

ul li a {
  text-decoration: none;
  color: red;
}

.sub-menu {
  display: none;
}

ul li:hover .sub-menu {
  display: block;
  position: absolute;
}