JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="navlist">
        <li><a href="#">Home</a></li>
        <li><a href="#">Programmatie</a></li>
        <li id="deelnemers">
            <a href="#">Deelnemers</a>
            <ul id="subnavlist">
                <li><a href="#">Sint-Lucas Beeldende Kunsten</a></li>
                <li><a href="#">Sint-Lucas Architectuur (Gent-Brussel)</a></li>
                <li><a href="#">Sint-Lucas Academie</a></li>
                <li><a href="#">Sint-Lucas Kunsthumaniora</a></li>
            </ul>
        </li>
        <li><a href="#">150 Jaar</a></li>
        <li><a href="#">Old skool, new class</a></li>
        <li><a href="#">Galerij</a></li><br>
     
        
    </ul>

CSS

#navlist li { display: inline; }

#subnavlist {
    padding-left: 5px;
    list-style: none;
    text-decoration: none;
    font-size: 8px;
    color: red;
    position: absolute;
}

#navlist li:hover #subnavlist {
    display: block;
    color: black;
    position: absolute;
}

JavaScript

jQuery(document).ready(function () {

    var subMenu = jQuery("#subnavlist");
    var linkClick = jQuery("ul li").filter(":has(#subnavlist)");

    subMenu.hide();
    
    linkClick.click(function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        subMenu.slideToggle("fast");
    });
});