Overflow stops interaction with rest of website

1

I’ve created a navigation bar with a dropdown menu. The problem is that I can’t interact with the website content, even when the drop down menu is closed. EXAMPLE HERE.

The z-index of the nav bar is 100, or else other hype documents go over it. The position is also absolute.

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<title>palimpalim</title>
	<style>
		html {
			height:100%;
		}
		body {
			margin:0;
			height:100%;
		}
	</style>
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, width=device-width" />
  </head>
  <body>
  	
		<div style="height:70px;">
			<div id="nav_hype_container" style="z-index:100;margin:auto;position:absolute;width:100%;height:100%;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="../stopsnooping/nav.hyperesources/nav_hype_generated_script.js?17600"></script>
	</div>
	</div>
		
<div style="text-align: center; font-size: 30px;">hello world</div>

  </body>
</html>

nav.zip (132.0 KB)