JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
            <li class="mainnav">MAINNAV</li>
                    <li class="sub1">SUB1</li>
                    <li class="sub2">SUB2</li>
</ul>
<ul class="nav">
            <li class="mainnav">MAINNAV2</li>
                    <li class="sub1">SUB1</li>
                    <li class="sub2">SUB2</li>
</ul>

CSS

.sub1 {
	width:90px;
	background-color:blue;
	float:left;
	padding:3px 0px;
	font-family:lato;
	font-size:12px;
	text-align:center;
	list-style:none;
	display:none;
}
.sub2 {	
	width:90px;
	background-color:red;
	float:left;
	padding:3px 0px;
	font-family:lato;
	font-size:12px;
	text-align:center;
	list-style:none;
	display:none;
}

.mainnav {
	color: white;
    background-color:grey;
    list-style: none outside none;
    padding: 7px;
    text-align: center;
    width: 166px;
}
.nav {
    display: inline-block;
    font-family: lato;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    width: 200px;
}

JavaScript

$(".mainnav").on("click", function(){
    $(".sub1, .sub2").slideDown("fast");
    $( ".mainnav" ).animate({
        backgroundColor: "#3A3A3A", 
        }, 500 );
});