JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mainmenu">
    <li class="parent">About
        <ul class="child">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
        </li>
    <li class="zoloo">Services</li>
    
        <ul class="child">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
  
    <li>Contact</li>
</ul>

CSS

:root {display: block}

ul.mainmenu {}
ul.mainmenu>li {float: left; text-align: left; margin-right: 20px; background-color: #eee; padding: 5px}

ul.child {display: none}
ul.child li { display: block;
    width: 25%;
    float: left;}
ul.zoloo {display: none}
ul.zoloo li { display: block;
    width: 25%;
    float: left;}

JavaScript

$(document).ready(function(){
    $("li.parent").hover(function(){
        $(this).find("ul").slideDown('fast', function() {});
    }, function(){
        $(this).find("ul").slideUp('fast', function() {});
    });

});