JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mk-menu">


        <div>
            <!-- wrapper to separate menu items for jquery -->
            <div class="mk-menu-item"> <a class="menu-head" id="ain-menu">House</a>

                <ul id="ain-menu-sub" class="mk-submenu">
                    <li><a href="#" name="ain-cal">house1</a>
                    </li>
                    <li><a href="#" name="ain-rates">house2</a>
                    </li>
                    <li><a href="#" name="ain-orates">house3</a>
                    </li>

                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="bjt-menu">Jet</a>

                <ul id="bjt-menu-sub" class="mk-submenu">
                    <li><a href="#" name="bjt-cal">Jet1</a>
                    </li>
                    <li><a href="#" name="bjt-rates">Jet2</a>
                    </li>
                    <li><a href="#" name="bjt-orates">Jet3</a>
                    </li>
                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="cnd-menu">Car</a>

                <ul id="cnd-menu-sub" class="mk-submenu">
                    <li><a href="#" name="cnd-cal">Car1</a>
                    </li>
                    <li><a href="#" name="cnd-rates">Car2</a>
                    </li>
                    <li><a href="#" name="cnd-orates">Car3</a>
                    </li>
                </ul>
            </div>
            <div class="mk-menu-item"> <a class="menu-head" id="and-menu">Discord</a>

                <ul id="and-menu-sub" class="mk-submenu">
                    <li><a href="#" name="and-cal">Discord1</a>
                    </li>
                    <li><a href="#" name="and-rates">Discord2</a>
                    </li>
                    <li><a href="#" name="and-orates">Discord3</a>
                    </li>
                </ul>
            </div>
        </div>

CSS

#mk-menu {
    color: #FFF;
    background: #556B80;
    float: center;
    margin-top: 0px;
    position: relative;
    width: 20%;
    font-family: Verdana, Geneva, sans-serif;
    padding-bottom: 39px;
    margin: auto;
    padding-bottom: 50px;
    padding-top: 50px;
}

a.menu-head {
    color: #FFF;
    display: block;
    font-size: 20px;
    margin: 100px 50px 0;
    padding: 5px;
    text-transform: uppercase;
    line-height: 15px
}

a:hover {
    background: #6E8193;
}

a.menu-head:hover {
    cursor: pointer;
}

#mk-menu ul {
    margin: 10px 0 15px 60px;
}

#mk-menu li a {
    color: #FFF;
    text-decoration: none
}

#mk-menu li a:hover {
    color: red;
    text-decoration: none
}

.mk-submenu {
    display: none;
}

.mk-submenu a {
    font-size: large
}

JavaScript

jQuery(".menu-head").click(function(a) {
    var myid = jQuery(this).attr("id");
    jQuery("#" + myid + "-sub").toggle(100);
    jQuery(this).toggleClass("mk-selected");
    jQuery(this).closest('.mk-menu-item').siblings().find('ul.mk-submenu').removeClass('mk-selected').slideUp();
    a.preventDefault();
});

jQuery(".mk-submenu li").click(function(b) {
    jQuery(".mk-submenu li").removeClass("active");
    jQuery(this).addClass("active");
    b.preventDefault();
});