Как сделать изменение стиля блока при условии исполнения двух событий?

Question

PressOff @PressOff

JavaScript

Как сделать изменение стиля блока при условии исполнения двух событий?

Доброго времени суток!

Задача сделать меню каталога товаров:

1.Кнопка Каталог по клику открывается и закрывается - сделано.

2.Необходимо, что бы при наведении на первый блок появлялся второй, при наведении на второй появлялся третий - сделано.

3.Необходимо чтобы при событии ухода мыши с третьего блока, скрывался третий и второй блоки, а при наведении обратно на второй блок сохранялся стиль видимости блоков 2 и 3.
А при возврате наведения на первый блок, оставался второй блок.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="jquery.comjquery-3.4.1.min.js"></script>
</head>
<body>
	<div class="navbar"> 
		<div class="catalog" id="catalog">
			<a id="catalogGoods" href="#">Каталог Товаров</a>
		</div>
	
		<div class="cat1" id="cat1">
			<a href="">Продукт 1</a>
			<a href="">Продукт 2</a>
			<a href="">Продукт 3</a>
			
		</div>
		<div class="cat2" id="cat2"></div>
		<div class="cat3" id="cat3"></div>
	</div>
	<script> 
						  
		var catalog = document.getElementById('catalog');
		var cat1 = document.getElementById('cat1');
		var cat2 = document.getElementById('cat2');
		var cat3 = document.getElementById('cat3');

		catalog.addEventListener('click', OnBlockCatalog);
		catalog.addEventListener('click', OffBlockCatalog);

		function OnBlockCatalog() {
			cat1.style.display = "block";
			this.removeEventListener('click', OnBlockCatalog); 
			this.addEventListener('click', OffBlockCatalog);   
		}
		function OffBlockCatalog() {
			cat1.style.display = "none";
			this.removeEventListener('click', OffBlockCatalog);
			this.addEventListener('click', OnBlockCatalog);
		}

		cat1.addEventListener('mouseenter', onTwoBlock);
		cat2.addEventListener('mouseenter', onThreeBlock);
		
		function onTwoBlock(){
			cat2.style.display = 'block';
		}
			
		
		function onThreeBlock(){
			cat3.style.display = 'block';
		}
			
		
		cat3.addEventListener('mouseleave', offAllBlock);
		
		function offAllBlock(){
			var One = cat1.style.display;
			var Two = cat2.style.display;
			var Three = cat3.style.display;
		}

	</script>
</body>
</html>