Menu con 3 niveles desplegables con HTML y CSS

Podemos hacer menú desplegables solo con HTML y CSS

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Menu con CSS</title>

    <link rel="stylesheet" href="main.css">

</head>

<body>

    <header id="header" class="">

        <h1>Menu CSS</h1>

    </header><!-- /header -->

    <nav>

        <ul class="menu-horizontal">

            <li><a href="#" title="Texto">Opcion 1</a></li>

            <li><a href="#" title="Texto">Opcion 2</a></li>

            <li>

                <a href="#" title="Texto">Opcion 3</a>

                <ul class="submenu1">

                    <li><a href="#" title="Texto">Texto</a></li>

                    <li>

                        <a href="#" title="Texto">Texto</a>

                        <ul class="submenu2">

                            <li><a href="#" title="Texto">Texto1</a></li>

                            <li><a href="#" title="Texto">Texto1</a></li>

                            <li>

                                <a href="#" title="Texto">Texto1</a>

                                <ul class="submenu3">

                                    <li><a href="#" title="Texto">Texto2</a></li>

                                    <li><a href="#" title="Texto">Texto2</a></li>

                                    <li><a href="#" title="Texto">Texto2</a></li>

                                </ul>

                            </li>

                        </ul>

                    </li>

                    <li><a href="#" title="Texto">Texto</a></li>

                </ul>

            </li>

            <li><a href="#" title="Texto">Opcion 4</a></li>

            <li><a href="#" title="Texto">Opcion 5</a></li>

        </ul>

</body>

</html>

main.css

/* main css */

/* Resetear todos los valores */

* {

    text-decoration: none;

    list-style: none;

    margin: 0;

    padding: 0;

    background-color: gray;

    font-family: sans-serif;

    font-size: 20px;

}

/* Encabezado */

header {

    width: 100%;

}

header h1{

    color:white;

    font-size: 24px;

    padding: 10px 10px;

}

/* Menu principal horizontal */

.menu-horizontal li{

    float:left;

}

/* Submenu vertical */

.submenu1 li{

    float: none;

}

.submenu2 li{

    float: none;

}

/* Configurar las opciones de los menus */

.menu-horizontal li a{

    display: block;

    width: 150px;

    background-color: black;

    color:white;

    border: 1px solid;

    padding: 10px 10px;

}

/* Cuando se pasa el raton por encima de la opcion cambia*/

.menu-horizontal li a:hover{

    display: block;

    background-color: white;

    color:black;

}

/* Cuando se pasa por una opcion hace visible el submenu oculto */

.menu-horizontal li:hover > ul{

    display: block;

}

/* Oculta los submenus */

.menu-horizontal li ul{

    display: none;

    position: absolute;

    min-width: 140px;

}

/* Reposiciona el submenu de 2 nivel */

.submenu2{

    position: relative;

    right: -140px;

    top: 35px;

}

/* Reposiciona el submenu de 3 nivel */

.submenu3{

    position: relative;

    right: -140px;

    top: 75px;

}

/* FIN */