JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="css/style.css"/>
        <title>Rage Fist</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    <body>
        <header id="header">
            <nav id="mainMenu">
                <ul id="listMenu">
                    <li id="accueil">Accueil</li>
                    <li id="charactere">Personnages</li> 
                        <ul id="perso">
                            <li>René</li>
                            <li>Roger</li>
                            <li>Robert</li>
                        </ul>
                     <li id="collection">Collections</li>
                        <ul id="collec">
                            <li id="pierre">Pierre</li>
                                <ul id="type">
                                    <li>Emeraude</li>
                                    <li>Saphir</li>
                                    <li>Rubis</li>
                                    <li>Amethyste</li>
                                </ul>
                            <li id="insecte">Insecte</li>
                                <ul id="race">
                                    <li>scarabé</li>
                                    <li>mouche</li>
                                    <li>fourmi</li>
                                    <li>Papillon</li>
                                </ul>
                            <li id="vegetal">Vegetal</li>
                                <ul id="veget">
                                    <li id="fruit">Fruit</li>
                                        <ul id="fru">
                                            <li>Pomme</li>
                                            <li>Poire</li>
                                            <li>Raisin</li>
              ...

CSS

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#listMenu{
    display: flex;
    flex-direction: row;
}
nav{
    display: flex;
    align-content: space-between;
}
li, ul{
	list-style: none; /*enlever puces*/
}

JavaScript

// Création d'un code pour que les sous menus apparaissent au passage de la souris mais qui ne marche pas super et qui est assez répétitif.

var perso = document.getElementById('charactere');
perso.addEventListener("mouseover", deroulement1, false);
function deroulement1(){
    var unroll = document.getElementById('perso').style.display;
    if(unroll=="block"){
        document.getElementById('perso').style.display = "none";
    }else{
        document.getElementById('perso').style.display = "block";
    }
    }
document.getElementById('perso').style.display = "none";
perso.addEventListener("mouseout", cacher, false);
function cacher(){
    if (document.getElementById('perso').style.display = "none"){
        document.getElementById('perso').style.display = "block"
    }
}
window.onload = function(){
    deroulement()
}

var collec = document.getElementById('collection');
collec.addEventListener("mouseover", deroulement2, false);
function deroulement2(){
    var unroll = document.getElementById('collec').style.display;
    if(unroll=="block"){
        document.getElementById('collec').style.display = "none";
    }else{
        document.getElementById('collec').style.display = "block";
    }
    }
document.getElementById('collec').style.display = "none";
collec.addEventListener("mouseout", cacher, false);
function cacher(){
    document.getElementById('collec').style.display = "none";
}
window.onload = function(){
    deroulement()
}

// c'est a partir d'ici que j'aimerais faire un système d'accordéon

var type = document.getElementById('pierre');
type.addEventListener("mouseover", deroulement2_1, false);
function deroulement2_1(){
    var unroll = document.getElementById('type').style.display;
    if(unroll=="block"){
        document.getElementById('type').style.display = "none";
    }else{
        document.getElementById('type').style.display = "block";
    }
    }
document.getElementById('type').style.display = "none";
type.addEventListener("mouseout",...