<div class="cat-container">
  <ul class="menu-item parent">
    <li class="menu-wrapper">
      <a class="menu-link" href="https://codepen.io/lagudal/pen/JjdWQpw"><span class="title">Title 1</span></a>
        <ul class="menu-item child">
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
            <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
       </ul>
    </li>
  </ul>
    <ul class="menu-item parent">
    <li class="menu-wrapper">
      <a class="menu-link" href="https://codepen.io/lagudal/pen/MWwppNW"><span class="title">Title 1</span></a>
        <ul class="menu-item child">
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>    
       </ul>
    </li>
  </ul>
    <ul class="menu-item parent">
    <li class="menu-wrapper">
      <a class="menu-link" href="https://codepen.io/lagudal/pen/eYNzgMN"><span class="title">Title 1</span></a>
        <ul class="menu-item child">
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
       </ul>
    </li>
  </ul>
  <ul class="menu-item parent">
    <li class="menu-wrapper">
      <a class="menu-link" href="https://codepen.io/dashboard/"><span class="title">Title 1</span></a>
        <ul class="menu-item child">
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
          <li class="menu-wrapper"><a href="#"><span>lorem ipsum</span></a></li>
       </ul>
    </li>
  </ul>
</div>
.cat-container {
  display: flex;
  .menu-item {
    list-style: none;
    height: fit-content;
  }
}
a {
  color: #333;
  text-decoration: none;
}
li.menu-wrapper {
  padding: 5px;
}
ul.child {
  padding-left: 0;
  padding-top: 5px;
}
.title {
  font-weight: 700;
}
View Compiled
$('.menu-item.parent').each((i, menu) => {
  const URL = menu.querySelector('.menu-link').href
  const childMenu = menu.querySelector('.menu-item.child')
  
  $(childMenu).append(`<li class='menu-wrapper'><a class='more' href='${URL}'><span class='title'>show all »</span></a></li>`)
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js