JSFiddle - React, Tailwind, and code Playground

by Ronny Rook

HTML

<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Verhuur</a>
        <ul class='children'>
            <li><a href="#">Presentatieschets</a></li>
            <li><a href="#">Verkooppromotie</a></li>
            <li><a href="#">Losse verhuur</a></li>
            <li><a href="#">Totaalconcepten</a></li>
        </ul>
    </li>
    <li><a href="#">Verkoop</a>
        <ul class='children'>
            <li><a href="#">Merken</a></li>
            <li><a href="#">Occasions</a></li>
        </ul>
    </li>
    <li><a href="#">Ledschermen</a>
        <ul class='children'>
            <li><a href="#">Ledscherm</a></li>
            <li><a href="#">Modulair</a></li>
            <li><a href="#">Videotrailer</a></li>
        </ul>
    </li>
</ul>

CSS

ul { list-style:none;}

.nav {
    width:100%;
    height:40px;
    background:rgba(102, 32, 95, 0.8);
}

    .nav li {
        position:relative;
        float:left;
        padding:10px 20px;
    }

        .nav > li { margin-right:15px;}

        .nav li ul {
            position:absolute;
            width:auto;
            top:40px;
            left:-10px;
            padding:10px 20px 10px 10px;
            background:rgba(102, 32, 95, 0.8);
        }

            .nav li ul li { width:80%;}

    .nav li a:link, .nav li a:visited, .nav li a:active {
        color:#fff;
        font-size:15px;
        font-weight:600;
        text-transform:uppercase;
        text-decoration:none;
    }

        .nav li:hover { background-color:#812e74; }

JavaScript

$( ".children").hide();
var currentLI = $( ".nav").find( "li");

currentLI.on("mouseover", function () {
    $(this).find( "ul").show();
});

currentLI.on("mouseleave", function () {
    $(this).find( "ul").hide();
});