JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <ul class="main-nav">
        <li class="menu-item">
            <a href="">menu-item</a>
            <ul class="sub-menu">
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="">menu-item</a>
            <ul class="sub-menu">
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a href="">sub-menu-item</a></li>
                <li class="sub-menu-item"><a...

CSS

ul{
  margin: 0;
  padding: 0;  
}

li{
    list-style: none;
}

.menu-item{
    float: left;
    position: relative;
    margin-right: 40px;
   
}
.menu-item >a{
     padding:10px;
    display:block;
    background:#444; 
    color:#fff;
}

.sub-menu{
    position: absolute;
    top: 100%;
    left: 0;
    background:#9c0;
    padding:10px;
    display:none;
}

.menu-item:hover > .sub-menu{
    display:block;
}

li.col2 { float: left; margin: 2px 4px;  }
.sub-menu.col2 { width: 250%; }

JavaScript

$('.sub-menu').each(function() {
      var count = $(this).find("li").length; 
    if(count >= 12 ){
        $(this).addClass('col2');
        $('li').addClass('col2');
    }

   if(count >= 24){
      $(this).toggleClass('col2 col3');
    }
});