Overflow stops interaction with rest of website


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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
		html {
		body {
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, width=device-width" />
		<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 style="text-align: center; font-size: 30px;">hello world</div>


nav.zip (132.0 KB)