botascopia-webiste-static/components/site-nav.html

 <nav id="site-nav">

        
        
        <ul class="nav-level-1_ul">
                <li class="nav-level-1_li li-dropdown">
                    <input type="radio" name="nav" id="nav-1">
                    <label class="nav-level-1_link" for="nav-1">Le projet <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                    <ul class="nav-level-2_ul">
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html">À propos</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="/a-propos.html#equipe">Équipe</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Communauté</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Publications</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Crédits et partenaires</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contact</a></li>
                        <li class="nav-level-2_li"><a class="nav-level-2_link" href="/cgu.html">Mentions légales</a></li>
                    </ul>
                </li>

            <li class="nav-level-1_li li-dropdown">
                <input type="radio" name="nav" id="nav-2">
                <label class="nav-level-1_link" for="nav-2">Base de connaissance <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                <ul class="nav-level-2_ul">
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="/species-list.html">Explorer les espèces</a></li>
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Contribuer à la base de connaissance</a></li>
                </ul>
            </li>
            <li class="nav-level-1_li li-dropdown">
                <input type="radio" name="nav" id="nav-3">
                <label class="nav-level-1_link" for="nav-3">Livrets <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                 <ul class="nav-level-2_ul">
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Créer un livret</a></li>
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Consulter les livrets</a></li>
                </ul>
            </li>
            <li class="nav-level-1_li li-dropdown">
                <input type="radio" name="nav" id="nav-4">
                <label class="nav-level-1_link" for="nav-4">Ateliers <span class="arrow"><include src="/components/icons/arrow-dropdown.svg"></include></span></label>
                 <ul class="nav-level-2_ul">
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Organiser un atelier</a></li>
                    <li class="nav-level-2_li"><a class="nav-level-2_link" href="#">Kits pédagogiques</a></li>
                </ul>
            </li>
        </ul>

        <button id="btn__connexion">Connexion</button>

        <figure class="img-menu">
            <img src="/assets/images/Cerisier.jpg">
        </figure>

       
    </nav>