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
            <ul id="perso" class="beta">
              <li>René</li>
              <li>Roger</li>
              <li>Robert</li>
            </ul>
          </li>

          <li id="collection" class="alpha">Collections
            <ul id="collec" class="beta">
              <li id="pierre" class="alpha">Pierre
              <ul id="type" class="beta">
                <li>Emeraude</li>
                <li>Saphir</li>
                <li>Rubis</li>
                <li>Amethyste</li>
              </ul>
              </li>
              <li id="insecte" class="alpha">Insecte
              <ul id="race" class="beta">
                <li>scarabé</li>
                <li>mouche</li>
                <li>fourmi</li>
                <li>Papillon</li>
              </ul>
              </li>
              <li id="vegetal" class="alpha">Vegetal
              <ul id="veget" class="beta">
                <li id="fruit" class="alpha">Fruit
                <ul id="fru" class="beta">
                  <li>Pomme</li>
                  <li>Poire</li>
                  <li>Raisin</li>
                  <li>Banane</li>
                </ul>
                </li>
                <li id="legume" class="alpha">Legume
                <ul id="leg" class="beta">
                  <li>Carotte</li>
                  <li>Pomme de Terre</li>
                  <li>Tomate</li>
                  <li>Haricot</li>
                </ul>
                </li>
                <li id="fleur" class="alpha">Fleur
            ...

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;
  margin: 0 10px;
}

.beta {
  display: none;
}

JavaScript

$(function() {

  $('.alpha').on("mouseenter", function() {
    $(this).find('>.beta').toggle();
  })

  $('.beta').on('mouseleave', function() {
    $(this).toggle();
  })

});