Как создать многоуровневое меню?

Question

[geyurgfuyewgfyuguy]

что делаю не так?

<ul class="menu-list menu-list__main">
						<li data-side-menu="#menuOneSide"><a href="">ФПС</a></li>
						<li><a href="">ФПС</a></li>
						<li><a href="">ФПС</a></li>
						<li><a href="">ФПС</a></li>
					</ul>

					<div id="menuOneSide" class="side-menu__list side-menu__list-sub">
						<ul class="menu-list">
							<li data-side-menu-item="#menuOneSideItem"><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС </a></li>
						</ul>
					</div>

					<div id="menuOneSideItem" class="side-menu__list side-menu__list-sub-items">
						<ul class="menu-list">
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
							<li><a href="">ФПС</a></li>
						</ul>
					</div>

$('.menu-list__main li').on('mouseover', function()
	{
		$('.menu-list__main li').removeClass('active');

		$(this).addClass('active');

		$($(this).attr('data-side-menu')).show();
	});

	// Под меню
	$('.menu-list__main li').on('mouseleave', function()
	{
		$('.menu-list__main li').removeClass('active');
		var liThis = $(this);

		$('.menu-list__main li').removeClass('active');
		$('.side-menu__list-sub').hide();

		$('.side-menu__list-sub').on('mouseover', function()
		{
			$('.menu-list__main li').removeClass('active');
			liThis.addClass('active');
			$(liThis.attr('data-side-menu')).show();

			$('.side-menu__list-sub li').on('mouseover', function()
			{
				$('.side-menu__list-sub li').removeClass('active');
				var liSubThis = $(this);

				$('.side-menu__list-sub li').removeClass('active');
				liSubThis.addClass('active');
				$(liSubThis.attr('data-side-menu-item')).show();
			});
		});

		$('.side-menu__list-sub').on('mouseleave', function()
		{
			var blockId = $(this);

			$('.menu-list__main li').removeClass('active');
			liThis.removeClass('active');
			$('.side-menu__list-sub').hide();

			$('.side-menu__list-sub li').on('mouseleave', function()
			{
				blockId.show();
				var liSubThis = $(this);

				$('.side-menu__list-sub li').removeClass('active');
				liSubThis.addClass('active');
				$(liSubThis.attr('data-side-menu-item')).hide();

				$('.side-menu__list-sub-items').on('mouseover', function()
				{
					blockId.show();

					$('.side-menu__list-sub li').removeClass('active');
					liSubThis.addClass('active');
					$(liSubThis.attr('data-side-menu-item')).show();
				});
			});
		});
	});

Делаю меню, должно работать так, наводим на первые элементы меню, показывается второй блок, если вывести курс из блока первого или второго, закрывается второе меню, с третьим точно также. То есть получается многоуровневое меню, при наведении на блоки, также с активным классом текущего меню, подменю и подподменю.