JSFiddle - React, Tailwind, and code Playground

HTML

<?php if ($categories) { ?>
<div id="cssmenu">
  <ul>
    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
        <?php for ($i = 0; $i < count($category['children']);) { ?>
        <ul>
          <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
          <?php for (; $i < $j; $i++) { ?>
          <?php if (isset($category['children'][$i])) { ?>
          <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
          <?php } ?>
          <?php } ?>
        </ul>
        <?php } ?>
      <?php } ?>
    </li>
  </ul>
</div>
<?php } ?>

CSS

/*------------------------------------
	OPENCART 1.5 JQUERY MENU
------------------------------------*/

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button
{
    line-height: 1;

    position: relative;

    display: block;

    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;

    list-style: none;

    border: 0;
}
#cssmenu:after,
#cssmenu > ul:after
{
    line-height: 0;

    display: block;
    visibility: hidden;
    clear: both;

    height: 0;

    content: '.';
}
#cssmenu #menu-button
{
    display: none;
}
#cssmenu
{
    font-family: Arial, Helvetica, sans-serif;

    margin-top: 10px;
    margin-bottom: 10px;

    border-radius: none;
    background: #515151;
}
#cssmenu > ul > li
{
    float: left;
}
#cssmenu.align-center > ul
{
    font-size: 0;

    text-align: center;
}
#cssmenu.align-center > ul > li
{
    display: inline-block;
    float: none;
}
#cssmenu.align-center ul ul
{
    text-align: left;
}
#cssmenu.align-right > ul > li
{
    float: right;
}
#cssmenu > ul > li > a
{
    font-size: 12px;
    font-weight: bold;

    padding: 10px 6px;

    text-decoration: none;
    letter-spacing: 1px;
    text-transform: none;

    color: #fff;
}
#cssmenu > ul > li:hover > a
{
    color: #000;
    background-color: #ddd;
}
#cssmenu > ul > li.has-sub > a
{
    padding-right: 10px;
}
#cssmenu > ul > li.has-sub > a:after
{
    position: absolute;
    top: 22px;
    right: 11px;

    display: block;

    width: 8px;
    height: 2px;

    background: #515151;
    /* content: ''; */
}
#cssmenu > ul > li.has-sub > a:before
{
    position: absolute;
    top: 19px;
    right: 14px;

    display: block;

    width: 2px;
    height: 8px;
    /* content: ''; */

    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;

...

JavaScript

(function($) {

  $.fn.menumaker = function(options) {
      
      var cssmenu = $(this), previousWidth = $( window ).width(), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);

      return this.each(function() {
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
        $(this).find("#menu-button").on('click', function(){
          $(this).toggleClass('menu-opened');
          var mainmenu = $(this).next('ul');
          if (mainmenu.hasClass('open')) { 
            mainmenu.hide().removeClass('open');
          }
          else {
            mainmenu.show().addClass('open');
            if (settings.format === "dropdown") {
              mainmenu.find('ul').show();
            }
          }
        });

        cssmenu.find('li ul').parent().addClass('has-sub');

        multiTg = function() {
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
          cssmenu.find('.submenu-button').on('click', function() {
            $(this).toggleClass('submenu-opened');
            if ($(this).siblings('ul').hasClass('open')) {
              $(this).siblings('ul').removeClass('open').hide();
            }
            else {
              $(this).siblings('ul').addClass('open').show();
            }
          });
        };

        if (settings.format === 'multitoggle') multiTg();
        else cssmenu.addClass('dropdown');

        if (settings.sticky === true) cssmenu.css('position', 'fixed');

        resizeFix = function() {

if($(window).width() == previousWidth) return;

          if ($( window ).width() > 1025) {
            cssmenu.find('ul').show();
          }

          if ($(window).width() <= 1025) {
            cssmenu.find('ul').hide().removeClass('open');
          }
        };
        resizeFix();
        return $(window).on('resize', resizeFix);

      });
  };
})(jQuery);

(function($){
$(document).ready(function(){

$("#cssmenu").menumaker({
   title:...