Menù nel menù - Forum HTML e CSS

Salve, sto cercando di fare un sito incentrato sulla linea temporale del gioco “The Legend Of Zelda”. Vorrei mettere il tutto in un menù ma, visto e considerato che si suddivide più volte, una prima volta si suddivide in due nella prima si suddivide in tre, se cerco di aprire il menù nel menù si chiude il primo.

Finno ad adesso ho provato con ciò (i puntini di sospensione è il testo):

HTML
<!DOCTYPE html>
<html>
<body>
<div>

	<div class="w3-row w3-center w3-card w3-padding">
		<h2><b>LA LINEA TEMPORALE SI DIVIDE IN 2:</b></h2>
							<a href="javascript:void(0)" onclick="openMenu(event, 'Hylia');">
								<div class="w3-col s6 tablink">IL REGNO HYLIA</div>
							</a>

							<a href="javascript:void(0)" onclick="openMenu(event, 'Zonau')";>
								<div class="w3-col s6 tablink">IL REGNO ZONAU</div>
							</a>	
						</div>
						
					<div id="Hylia" class="w3-container menu w3-padding-48 w3-card">		

		  				...
						<div class="w3-row w3-center w3-card w3-padding">
							<h2><b>LA LINEA TEMPORALE SI DIVIDE ULTERIORMENTE IN 3:</b></h2>
							<a href="javascript:void(0)" onclick="openMenu(event, 'Bambino');">
								<div class="w3-col s6 tablink">L’EROE HA VINTO: LINEA TEMPORALE BAMBINO</div>
							</a>

							<a href="javascript:void(0)" onclick="openMenu(event, 'Adulto');">
								<div class="w3-col s6 tablink">L’EROE HA VINTO: LINEA TEMPORALE ADULTO</div>
							</a>
								
							<a href="javascript:void(0)" onclick="openMenu(event, 'Sconfitta');" id="myLink">
								<div style="margin:  0px 160px" class="w3-col s6 tablink">L'EROE VIENE SCONFITTO</div>
							</a>
						</div>
								
						<div id="Bambino" class="w3-container menu w3-padding-48 w3-card">
							...
						</div>
								
						<div id="Adulto" class="w3-container menu w3-padding-48 w3-card">
							...
						</div>
						
						<div id="Sconfitta" class="w3-container menu w3-padding-48 w3-card">
							...
						</div>

					</div>		
						<div id="Zonau" class="w3-container menu w3-padding-48 w3-card">
							...
						</div>
						
JAVA										
				
<script>
	// Tabbed Menu
	function openMenu(evt, menuName) {
	  var i, x, tablinks;
	  x = document.getElementsByClassName("menu");
	  for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	  }
	  tablinks = document.getElementsByClassName("tablink");
	  for (i = 0; i < x.length; i++) {
		tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
	  }
	  document.getElementById(menuName).style.display = "block";
	  evt.currentTarget.firstElementChild.className += " w3-dark-grey";
	}
	document.getElementById("myLink").click();
</script>
</body>
</html>

avete qualche suggerimento su come non far sparire il primo menù , Hylia, quando tento di aprire uno dei 3 menu, bambino, adulto, sconfitta?