Crear un menú con Flex y CSS3 Parte 1

La forma adecuada de generar un menú correcto actual es utilizando las etiquetas de listas, las etiquetas de nav, y display Flex. A continuación dejo un ejemplo de como realizarlo y como quedaría. Con un ancho de pantalla mayor de 500px quedaría así. Y con menos quedaría responsive design (o adaptado a móvil). Ocupando todo el ancho. En la enseño como añadir un botón para conseguir que aparezca el menú. Pensado en móvil.
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		nav#main ul {
			display: flex;
			list-style: none;
			margin: 0;
			padding: 0;
		}
		@media only screen and (max-width: 500px) {
			nav#main ul {
				flex-direction: column;
			}
  		}
		nav#main li {
			flex-grow: 1;
		}
		nav#main ul li a {
			display: block;
			color: black;
			text-decoration: none;
			height: 100%;
			width: 100%;
			text-align: center;
			background-color: green;
			border: 1px solid black;
		}
		nav#main ul li a:hover {
			color: white;
		}
	</style>
</head>
<body>
	<nav id="main">
		<ul>
			<li>
				<a href="#">Lorem.</a>
			</li>
			<li>
				<a href="#">Commodi.</a>
			</li>
			<li>
				<a href="#">Facere?</a>
			</li>
			<li>
				<a href="#">Impedit!</a>
			</li>
		</ul>	
	</nav>
</body>
</html>
Versión escritorio