Edit in JSFiddle

		var menu = {
			top : 0,
			left : 0,
			show : function () {
				$("#sub").stop().animate({top:40}, 100);
			},
			hide : function () {
				$("#sub").stop().animate({top:20}, 100);
			},			
		};

		window.addEventListener("scroll", function(event) {
		    menu.top = this.scrollY;
		    menu.left = this.scrollX;

	    	var x = document.getElementById("x");	
	    	var y = document.getElementById("y");

	    	x.innerHTML = menu.top;
	    	y.innerHTML = menu.left;
		    if (menu.top == 0)
		    {
	    		menu.show();
		    }
		    else
		    {
		    	menu.hide();
		    }
		}, false);

		document.addEventListener('DOMContentLoaded', function () {
			document.getElementById("header").addEventListener("mouseover", function(){
	   			menu.show();
			});
			document.getElementById("header").addEventListener("mouseout", function(){
			    if(menu.top != 0)
			    	menu.hide();
			});			
		});

	<header id="header">
        <nav id="main">
            <span id="x"></span>
            <span id="y"></span>
        </nav>
        <nav id="sub"></nav>
	</header>
	<div style="margin-top:80px;">
		<h1>Welcome!</h1>
		<div style="background-color:#eee">A</div>
		<div style="background-color:#aaa">B</div>
		<div style="background-color:#888">C</div>
		<div style="background-color:#666">D</div>
		<div style="background-color:#444">E</div>
		<div style="background-color:#222">F</div>
	</div>

		body {margin:0px; padding: 0px;}
		div {height:200px;}
		#header {width:100%; position:fixed; top:0;}
		#main {background-color:yellow; height:40px;width:100%; position: relative; z-index: 2;}
		#sub {background-color:gray; height:20px;width:100%;position:fixed; z-index: 1;top:40px;}