JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu-demo2">
	<li><a href="#">Lien menu 1</a>
	</li>
	<li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2 hhg hhh nn</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 3</a>
		<ul>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
			<li><a href="#">lien sous menu 3</a></li>
		</ul>
	</li>
	<li><a href="#">Lien menu 4</a>

	</li>
</ul>

CSS

#menu-demo2, #menu-demo2 ul{
padding:0;
margin:0;
list-style:none;
text-align:center;
background: green;
}
#menu-demo2{
border: 1px solid red;
}
#menu-demo2 li{
display:inline-block;
position:relative;
border-left: 1px solid red;
border-right: 1px solid red;
}
#menu-demo2 ul li{
display:inherit;
border-radius:0;
}
#menu-demo2 ul{
position:absolute;
overflow:hidden;
margin-top:1px;
left: -10000px;
top: auto;
width: 1px;
height: 1px;    
}

#menu-demo2 li.actif ul{
left: auto;
width: 100%;
height: auto;
}


/* les a href */
#menu-demo2 a{
text-decoration:none;
display:block;
padding:8px 32px;
color:#fff;
}
#menu-demo2 ul a{
padding:8px 0;
}
#menu-demo2 li:hover li a{
color: white;
text-transform:inherit;
}
#menu-demo2 li:hover a, #menu-demo2 li li:hover a{
color:#000;
}

JavaScript

$('#menu-demo2  li').click(function() {
    $(this).toggleClass('actif'); 
    return false;
});