JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainMenu">
    <li class="level-0"><a href="#">Accueil</a></li>
    <li class="level-0"><a href="#">A propos de Nous</a>
    <div class="subMenu">
             <ul>
                 <li><a href="#">Historique</a></li>
                 <li><a href="#">l'équipe</a></li>
                 <li><a href="#">nouveauté</a></li>
            </ul> 
        </div>
    </li>
    <li class="level-0"><a href="#">Contact</a></li>
</ul>

CSS

.mainMenu li
{
    display: inline-block;
    list-style: none;
    text-transform: uppercase;
    font-size: 1.2em;
    font-weight: bold;
    border: 0.2em solid #333333;
    padding: 0.5em;
}

.subMenu
{
    display: none;
}

.subMenu ul li
{
    display: block;
    list-style: none;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    border: none;
    padding: 0.2em;
}

JavaScript

window.addEvent('domready', function() {
    
   $(document.body).getElements('li.level-0').addEvents( { 
        mouseenter: function() {
            var submenu = $(this).getChildren('div.subMenu');
            submenu.slide('in');
        },
       mouseleave: function() {
            var submenu = $(this).getChildren('div.subMenu');
            submenu.slide('out');
        }
   });
    
});