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;
    }