Menú sencillo y profesional con Flex

La estructura para realizar un menú moderno en web ha evolucionado. Debemos usar todo el potencial de HTML5 con sus etiquetas semánticas y CSS3 con su versatilidad de Flex. Si queremos tener un buen SEO, o posicionamiento online, debemos tener un HTML con la jerarquía muy estricta: nav > ul > li > a. Y un CSS que nos decore nuestro diseño. A continuación dejo un ejemplo.

Demo

HTML

 <nav class="principal">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">FAQ</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Informacion</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

CSS

nav.principal ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
} 
nav.principal ul li a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: black;
}
nav.principal ul li a:hover {
    background-color: black;
    color: white;
}

Si utilizas SASS se vuelve más compacto.

nav.principal
    ul
        display: flex
        list-style: none
        padding: 0
        margin: 0
        a
            display: block
            padding: 1rem
            text-decoration: none
            color: black
            &:hover
                background-color: black
                color: white

Completo

Todo junto quedaría de la siguiente forma.

    <!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo de menu</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <style>
            nav.principal ul {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
            } 
            nav.principal ul li a {
                display: block;
                padding: 1rem;
                text-decoration: none;
                color: black;
            }
            nav.principal ul li a:hover {
                background-color: black;
                color: white;
            }
        </style>
    </head>
    <body>
        <nav class="principal">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Informacion</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </body>
    </html>
Versión escritorio