JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="main_menu clearfix">
		<button class="left_menu_button"><<</button>
		<button class="right_menu_button">>></button>
		<div class="main_menu_wrapper overflow">
			<div class="main_menu_list overflow">
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
					<div class="submenu">
						<div>
							<a href="/menu.php?product=1">Подменю 1</a>
							<a href="/menu.php?product=2">Подменю 2</a>
							<a href="/menu.php?product=3">Подменю 3</a>
							<a href="/menu.php?product=4">Подменю 4</a>
							<a href="/menu.php?product=5">Подменю 5</a>
						</div>
					</div>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div class="menu_item">
					<a href="/menu.php?dishes=100">Новое
						<img src="http://cdn.joxi.ru/uploads/prod/2014/04/28/97b/a0e/667681dc9cae3a147016136704dc4ec821dc56c9.jpg">
					</a>
				</div>
				<div...

CSS

* {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, sans-serif;
}
a img {
	border: none;
}
a {
	text-decoration: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.overflow {
	overflow: hidden;
}
.clearfix:after {
	content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.wrapper {
	margin: 0 auto;
	width: 980px;
}
.main_menu {
	width: 880px;
	position: relative;
	z-index: 1;
	background: #1a1a1a;
	background: rgba(255, 255, 255, 0.1);
	padding: 10px 55px 10px 45px;
	height: 156px;
}
.main_menu_list {
	height: 500px;
}
.menu_item {
	float: left;
	width: 130px;
	margin-right: 20px;
	text-align: center;
	position: relative;
}
.menu_item:first-child {
	margin-left: 5px;
}
.menu_item a {
	display: block;
	font: normal 14px PresentScript;
	text-transform: uppercase;
}
.menu_item img {
	margin-top: 5px;
	border: 1px solid #5f5f5f;
	transition: box-shadow ease 0.5s;
	width: 100%;
	height: 130px;
}
.menu_item:hover .submenu {
	display: block;
}
.main_menu:hover {
	z-index: 2;
}
.menu_item:last-child {
	margin-right: 0;
}
.submenu div {
	background: #1a1a1a;
	background: rgba(255, 255, 255, 0.1);
	padding: 15px 0;	
}
.submenu {
	border-top: 10px solid transparent;
	display: none;
	position: absolute;
	top: 156px;
	left: -10%;
	width: 120%;
	background: #ccc;
}
.submenu a {
	text-transform: none;
	font-size: 19px;
	margin-bottom: 15px;
}
.left_menu_button,
.right_menu_button {
	position: absolute;
	top: 76px;
	border: none;
	background: transparent;
	cursor: pointer;
	height: 23px;
	width: 13px;
	color: #000;
}
.right_menu_button {
	right: 15px;
}
.left_menu_button {
	left: 5px;
}
.main_menu_wrapper {
	width: 880px;
	padding-right: 10px;
}
.main_menu_list {
	width: 10000px;
}
.content {
	padding: 45px;
	position: relative;
	z-index: 1;
}
.content a {
	display: block;
	width: 200px;
	height: 50px;
}
.content a:hover {
	color: #ccc;
}

JavaScript

(function($) {
	$(document).ready(function() {
		/* === Карусель категории === */
		var widthItem = 150,
			productsWrapperWidth = $('.main_menu_wrapper').width(),
			visibleItems = Math.ceil(productsWrapperWidth / widthItem),
			totalItems = $('.menu_item').length,
			hiddenItems = totalItems - visibleItems,
			token = 0,
			speed = 350,
			isAnimate = true,
			$scrollableElement = $('.main_menu_list'),
			$buttonLeft = $('.left_menu_button'),
			$buttonRight = $('.right_menu_button');

		// Блокируем кнопки в случае необходимости
		if (totalItems <= visibleItems) {
			$buttonRight.hide();
		}
		$buttonLeft.hide();

		// Функция прокрутки элементов
		function scrollable($scrollableElement, sign, value, speed) {
			isAnimate = false;
			$scrollableElement.animate({'margin-left': sign + '=' + value + 'px'}, speed, function() {
				isAnimate = true;
				if (sign == '-') {
					token++;
				} else {
					token--;
				}
			});
		}

		// Прокрутка вправо
		$buttonRight.on('click', function() {
			$buttonLeft.show();
			if (token == (hiddenItems - 1)) {
				$(this).hide();
			}
			if (token < hiddenItems && isAnimate) {
				scrollable($scrollableElement, '-', widthItem, speed);
			} else {
				return false;
			}
		});

		// Прокрутка влево
		$buttonLeft.on('click', function() {
			$buttonRight.show();
			if (token == 1) {
				$(this).hide();
			}
			if (token >= 1 && isAnimate) {
				scrollable($scrollableElement, '+', widthItem, speed);
			} else {
				return false;
			}
		});
	});
})(jQuery);