JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-icon">Click to Open</div>

<ul id="navbar">
    <li><a href="#">Parent 1</a>
        <ul>
            <li><a href="#">Sibling 1</a></li>
            <li><a href="#">Sibling 2</a></li>
        </ul>
    </li>
    <li><a href="#">Parent 2</a>
        <ul>
            <li><a href="#">Sibling 1</a></li>
            <li><a href="#">Sibling 2</a></li>
        </ul>
    </li>
</ul>

CSS

.menu-icon {
    border:1px solid black;
    padding:5px 10px;
    cursor:pointer;
}

#navbar {
	display:none;
	width:100%;
	margin:0;
	padding:0;
}
	#navbar > li {
		background:#000;
		font-family:'Open Sans', Arial, Sans-serif;
		font-weight:500;
		font-size:18px;
		color:#fff;
		text-transform:capitalize;
		text-align:left;
		border-bottom:1px solid #555;
	}
		#navbar > li > ul, #navbar > li > ul > li > ul {
			display:none;
			padding:0;
		}
		#navbar > li a {
			padding:15px 30px;
			color:#fff;
			text-decoration:none;
			display:block;
		}
		#navbar li.has-child > a:after {
			color: red;
       		content: ' ▸';
       		display:inline-block;
       		position:absolute;
       		right:30px;
		}
			#navbar li.has-child > a.open:after {
	       		content: ' ▾';
			}
		#navbar > li > ul > li {
			background:#000;
			font-size:14px;
		}

JavaScript

$(function() {
    $('.menu-icon').click(function() {
        $('#navbar').slideToggle();
    });
    $('#navbar li:has(ul)').addClass('has-child');
    $('#navbar li > a').click(function() {
        $(this).toggleClass('open');
        $(this).next('ul').slideToggle();
    });
});