Menu responsive

Bonjour à tous,
je débute en CSS et je dois faire un menu pour mobile.
Lorsque je clique sur le sous-menu pour le développer, le menu se referme.
Je précise que je souhaite le faire uniquement en CSS, sans JS.

    .burger:hover+.menu {
        max-height: 680px;
    }

    .menu {
        overflow: hidden;
        position: absolute;
        top: 60px;
        width: 335px;
        max-height: 0px;
        transition: .5s ease-in;
        background-color: white;
        z-index: 1;
        margin-left: -16px;
    }

    .domaine:hover .sousmenu {
        height: 245px;
    }

    .sousmenu {
        position: relative;
        width: 335px;
        height: 0px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: ease-in;
        background-color: #fff;
        margin: 0;
    }

<nav>
                <div class="burger"><i class="fas fa-bars"></i></div>
            <ul class="menu">
                <li><a href="index.html">accueil</a></li>
                <li><a href="#">parcours</a></li>
                <li class="domaine"><a href="#">le domaine &ensp;<i class="fas fa-chevron-down"></i></a>
                    <ul class="sousmenu">
                        <li><a href="#">le parc</a></li>
                        <li><a href="#">hôtel</a></li>
                        <li><a href="#">restaurant</a></li>
                    </ul>
                </li>
                <li><a href="#">les tournois</a></li>
                <li><a href="contact.html">tarifs & contacts</a></li>
            </ul>
</nav>

Quand tu cliques sur le sous menu, le menu burger n'est plus considéré comme cliqué