JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    
     <ul id="nav">
        <li><a href="#">Algemeen</a>
            <ul>
                <li><a href="#">Welkom</a></li>
                <li><a href="#">Clublied</a></li>
                <li><a href="#">Statuten</a></li>
                <li><a href="#">Nieuws</a></li>
                <li><a href="#">Praesidia</a>
                    <ul>
                        <li><a href="#">webmasters</a></li>
                    </ul>
                </li>
                <li><a href="#">Clubcafés</a></li>
                <li><a href="#">Sponsors</a></li>
                <li><a href="#">Vacatopia</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Links</a></li>
            </ul>
        </li>
    
        <li><a href="#">Activiteiten</a>
            <ul>
                <li><a href="#">Kalender</a></li>
                <li><a href="#">Foto's</a></li>
            </ul>
        </li>
        <li><a href="#">Events</a>
            <ul>
                <li><a href="#">Revue</a></li>
            </ul>
        </li>
        <li><a href="#">Forum</a>    </li>

        <li><a href="#">Contact</a>    </li>
    </ul> 
    
</div>

CSS

ul#nav {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

ul#nav > li {
    position:relative;
    width: 200px;
    line-height:30px;
    display: inline;
}

ul#nav > li  ul {
    position: absolute;
    width: 130px;
    display: none;
}

ul#nav > li >  ul >  li > ul {
    width: 200px;
}

ul#nav > li:hover >  ul, ul#nav > li >  ul >  li:hover > ul {
    color: #F8C400;
    display: block;
}

ul#nav > li >  ul >  li:hover > ul {
   margin-left: 90px;
   margin-top: -50px;    
}

#nav a {
    display: inline-block; 
    padding:0 20px;
    margin: 0;
    text-decoration: none;
}

ul#nav li> > ul > li {
    display: block;
}
        
ul#nav > li:hover a {
    text-decoration: none;
    background-color:#999;
}

ul#nav > li:hover > ul > li > a {
    text-decoration:none;
    background: none;
}

a:link, a:visited{
    font-weight: normal;
    color: #CCCCCC;
}


a:hover, a:active{
    font-weight: bold;
    color: #F8C400;
}

ul#nav > li > ul  {
    background-color: #666;
    border-top: 0px solid #FFF;
    border-left: 0;
}