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="charactere" class="alpha">Personnages</li> 
                        <ul id="perso" class="beta">
                            <li>René</li>
                            <li>Roger</li>
                            <li>Robert</li>
                        </ul>
                     <li id="collection" class="alpha">Collections</li>
                        <ul id="collec" class="beta">
                            <li id="pierre" class="alpha">Pierre</li>
                                <ul id="type" class="beta">
                                    <li>Emeraude</li>
                                    <li>Saphir</li>
                                    <li>Rubis</li>
                                    <li>Amethyste</li>
                                </ul>
                            <li id="insecte" class="alpha">Insecte</li>
                                <ul id="race" class="beta">
                                    <li>scarabé</li>
                                    <li>mouche</li>
                                    <li>fourmi</li>
                                    <li>Papillon</li>
                                </ul>
                            <li id="vegetal" class="alpha">Vegetal</li>
                                <ul id="veget" class="beta">
                                    <li id="fruit" class="alpha">Fruit</li>
                                        <ul id="fru" class="beta">
                                            <li>Pomme</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;
}

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 unroll = document.getElementsByClassName('alpha');
unroll.addEventListener("mouseover", deroulement, false);
function deroulement(){
    var unroll = document.getElementsByClassName('beta').style.display;
    if(unroll=="block"){
        document.getElementsByClassName('beta').style.display = "none";
    }else{
        document.getElementsByClassName('beta').style.display = "block";
    }
    }
document.getElementsByClassName('beta').style.display = "none";
unroll.addEventListener("mouseout", cacher, false);
function cacher(){
    if (document.getElementsByClassName('beta').style.display == "none"){
        document.getElementsByClassName('beta').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...