JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container"> 
  
  <!--aaw categories listing desktop view-->
  <div class="col-sm-3 navbar-ctg">
    <ul class="nav navbar-nav categories">
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Refrigerator & Freezers</a>
        <ul class="dropdown-menu ctg-sub1">
          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Refrigerators</a>
            <ul class="dropdown-menu ctg-sub2">
              <li><a href="product.html">Top Mount</a></li>
              <li><a href="product.html">Bottom Freezer</a></li>
              <li><a href="product.html">Side by Side</a></li>
              <li><a href="product.html">Upright</a></li>
            </ul>
          </li>
          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Freezers</a>
            <ul class="dropdown-menu ctg-sub2">
              <li><a href="product.html">Upright</a></li>
              <li><a href="product.html">Chest</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Washers & Dryers</a>
        <ul class="dropdown-menu ctg-sub1">
          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Washers</a>
            <ul class="dropdown-menu ctg-sub2">
              <li><a href="product.html">Front Loading</a></li>
              <li><a href="product.html">Top Loading</a></li>
              <li><a href="product.html">Laundry Center</a></li>
            </ul>
          </li>
          <li class="dropdown dropdown-submenu"><a href="#"...

CSS

.dropdown-submenu {
	position: relative;
}
.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: 0
}
.dropdown-submenu a:after, .dropdown a:after {
	display: block;
	font-family: FontAwesome;
	content: '\f105';
	float: right
}
ul.dropdown-menu.ctg-sub1 li a:after {
	display: none !important
}
/*end navigation dropdown styles*/
.navbar-ctg {
	background: #e7e7e7;
	padding: 5px 20px 6px;
	position: relative
}
.cat-nav {
	width: 100%;
	background: transparent;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	color: #fff;
	cursor: pointer
}
.cat-nav a {
	width: 50%;
	float: left;
	padding: 10px;
	display: block
}
.cat-nav .ca-top {
	background: #eee
}
.cat-nav .ca-bottom {
	background: #333
}
.navbar-nav.categories {
	width: 100%;
	max-height: 428px;
	overflow: hidden;
}
.categories li {
	width: 100%;
	display: block;
	position: static
}
.categories li a {
	padding: 3.8pt 0 3.4pt;
	border-bottom: 1px solid #d2d2d2;
	color: #545454
}
.categories>li:last-child>a {
	border-bottom: 0
}
.categories ul.dropdown-menu {
	right: -220px;
	left: auto;
	top: auto;
	margin-top: -30px;
	padding: 0 15px;
	min-width: 220px;
	border-radius: 0;
	border: 0;
	background: #d7d7d7
}
.categories .ctg-sub1 {
	padding: 0 0 !important
}
.categories .ctg-sub1 li {
	border-bottom: 1px solid #e8e8e8
}
.categories .ctg-sub1 li a {
	display: block;
	padding: 8px 15px
}
.categories .ctg-sub2 {
	background: #e7e7e7 !important;
	padding: 0 0 !important;
	right: -220px !important
}
.categories li a:hover, .categories li a:focus, .categories li.open>a {
	background-color: transparent !important;
	border-color: #d2d2d2 !important;
	color: #006ca1 !important
}

JavaScript

//for dropdown
if ($(window).width() > 992) {
$('ul.nav li.dropdown').hover(function() {
  $(this).find('.ctg-sub1').stop(true, true).delay(100).fadeIn(100);
}, function() {
  $(this).find('.ctg-sub1').stop(true, true).delay(100).fadeOut(100);
});

$('ul.ctg-sub1 li.dropdown').hover(function() {
  $(this).find('.ctg-sub2').stop(true, true).delay(100).fadeIn(100);
}, function() {
  $(this).find('.ctg-sub2').stop(true, true).delay(100).fadeOut(100);
});
}


//for scroll down
$(document).ready(function() {
    var count;
    var interval;

    $(".ca-top").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalDown = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos + count);
        }, 10);
    }).click(function() {
        if (count < 6) {
             count = count+1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalDown);
    });
    
    $(".ca-bottom").on('mouseover', function() {
        var div = $('.navbar-nav.categories');

        intervalUp = setInterval(function(){
            count = count || 1;
            var pos = div.scrollTop();
            div.scrollTop(pos - count);
        }, 10);
    }).click(function() {
        if (count > 6) {
             count = count-1;
        }
    }).on('mouseout', function() {
        // Uncomment this line if you want to reset the speed on out
        count = 0;
        clearInterval(intervalUp);
    });    
    
});