enlacee/menu-responsive.html

## menu-responsive.html
<!DOCTYPE html>
<html>
<head>
	<title>h22</title>
</head>
<body>
	<nav id="nav" role="navigation">
		<a href="#nav" title="Show navigation" href="javascript:void(0);" onclick="myFunction()">Show navigation &#9776;</a>
		<a href="#" title="Hide navigation" href="javascript:void(0);" onclick="myFunction2()">Hide navigation &times;</a>
		<ul>
			<li><a href="/">Home</a></li>
			<li>
		        <a href="/" aria-haspopup="true">Blog</a>
		        <ul>
		            <li><a href="/">Design</a></li>
		            <li><a href="/">HTML</a></li>
		            <li><a href="/">CSS</a></li>
		            <li><a href="/">JavaScript</a></li>
		        </ul>
		    </li>
		    <li>
		        <a href="/" aria-haspopup="true">Work</a>
		        <ul>
		            <li><a href="/">Web Design</a></li>
		            <li><a href="/">Typography</a></li>
		            <li><a href="/">Front-End</a></li>
		        </ul>
		    </li>
		    <li><a href="/">About</a></li>
		</ul>
	</nav>

	<style type="text/css">
		#nav {

		}
		#nav > a {
			display: none;
		}
		#nav li {
			position: relative;
		}
		#nav li a {
			color: black;
			display: block;
		}
		#nav li a:active {
			background-color: #c00 !important;
		}
		/* fisrt level */
		#nav > ul {
			display: block;
			height: 3.75em;
			/*custom*/
			list-style: none;
			margin: 0;
			padding: 0;
		}
		#nav > ul  .hidden{
			display: block;
		}
		#nav > ul > li {
			width: 25%;
			height: 100%;
			float: left;
		}
		/* second level */
		#nav li ul{
			display: none;
			position: absolute;
			top: 100%;
			/*custom*/
			list-style: none;
			margin: 0;
			padding: 0 0 0 1em;
		}
		#nav li:hover ul{
			display: block;
		}

		@media only screen and ( max-width: 40em ) /* 640 */{
			#nav{
				position: relative;
			}
			#nav > a {
			}
			#nav:not( :target ) > a:first-of-type,
			#nav:target > a:last-of-type{
				display: block;
			}
			/* first level */
			#nav > ul {
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
			#nav:target > ul{
				display: none;
				background: red;
			}
			#nav > ul > li {
				width: 100%;
				float: none;
			}
			/* second level */
			#nav li ul {
				position: static;
				display: block;
			}
		}
	</style>
	<script type="text/javascript">
		function myFunction() {
			document.querySelector("#nav > ul").style.display = 'block';
		}
		function myFunction2() {
			document.querySelector("#nav > ul").style.display = 'none';
		}
	</script>
</body>
</html>