let menus = document.querySelectorAll('a[data-group]'),
	subMenu = document.getElementById("subMenu"),
	activeSubMenuGroup = [
		document.querySelector(`div.group[data-group]`),
		document.querySelector(`a[data-group]`)
	];
	subMenuGroups = [];

function openMenu(event){
	activeSubMenuGroup[0].classList.remove("open");
	activeSubMenuGroup[1].classList.remove("open");
	activeSubMenuGroup[0] = subMenuGroups[this.dataset.group];
	activeSubMenuGroup[1] = this;

	this.classList.add("open");
	subMenu.classList.add("open");
	activeSubMenuGroup[0].classList.add("open");
}

function keepMenuOpen(event){
	subMenu.classList.add("open");
	activeSubMenuGroup[1].classList.add("open")
}

function closeMenu(event){
	subMenu.classList.remove("open");
	activeSubMenuGroup[1].classList.remove("open");
}

subMenu.addEventListener("mouseenter", keepMenuOpen);
subMenu.addEventListener("mouseleave", closeMenu);

for(let m of menus){
	subMenuGroups[m.dataset.group] = document.querySelector(`div.group[data-group="${m.dataset.group}"]`);
	m.addEventListener("mouseenter", openMenu);
	m.addEventListener("mouseleave", closeMenu);
}