Menú desplegable con HTML5 y CSS3

A continuación dejo un ejemplo de como realizar un menú con CSS3 usando la sintaxis de HTML5. Se utiliza el formato estándar para la estructura del HTML, con listas desordenadas. Y para CSS el moderno estilo Flex. De esta forma podrás tener un menú desplegable sin saber Javascript utilizando todo el potencial de las hojas de estilos.

DEMO

HTML5

	<nav class="menuCSS3">
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Empleados</a>
				<ul>
					<li><a href="#">Juan</a></li>
					<li><a href="#">Paco</a></li>
					<li><a href="#">Ramón</a></li>
					<li><a href="#">María</a></li>
				</ul>
			</li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">Contacto</a>
				<ul>
					<li><a href="#">Email</a></li>
					<li><a href="#">Mapa</a></li>
				</ul>

			</li>
		</ul>
	</nav>

CSS3

	.menuCSS3 ul {
		display: flex;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.menuCSS3 a {
		display: block;
		padding: 2em;
		background-color: #F9B53C;
		text-decoration: none;
		color: #191C26;
	}
	.menuCSS3 a:hover {
		background-color: #CC673B;
	}
	.menuCSS3 ul li ul {
		display: none;
	}
	.menuCSS3 ul li a:hover + ul, .menuCSS3 ul li ul:hover {
		display: block;
	}
Versión escritorio