JSFiddle - React, Tailwind, and code Playground

HTML

<div class="MENU" unselectable="on" style="background-color:#B5E61D;width:216px;height:auto;position:relative;left:0%;right:-1px;top:0px;bottom:30px;z-index:auto">
								<a id="bt2" unselectable="on" style="clip:rect(auto, auto, auto, auto)">
								<h3>Filières</h3></a>
								<div unselectable="on" id="bloc2" class="bloc">
									<ul id="menu-vertical">
										<li>
											<a unselectable="on" href="#">
											Strategies de production</a>
										</li>
										<li>
											<a unselectable="on" href="#">
											Variétés</a>
										</li>
										<li>
											<a unselectable="on" href="#">Base 
											de données phytosanitaire</a>
										</li>
										<li>
											<a unselectable="on" href="#">
											Légumes secs</a>
										</li>
										<li>
											<a unselectable="on" href="#">
											Composées</a>
										</li>
										<li>
											<a unselectable="on" href="#">
											Potagères plein champs</a>
										</li>

										<li>
											<a unselectable="on" href="#">
											Semences de bases</a>

										</li>
										<li>
											<a unselectable="on" href="#">
											Chou-fleur</a>

										</li>
										<li class="dropdown-submenu"><a unselectable="on" href="/operations/Production/FILIERES/Forms/AllItems.aspx?RootFolder=/operations/Production/FILIERES/SOLANACEES%20CUCURBITACES&amp;InitialTabId=Ribbon.Document&amp;VisibilityContext=WSSTabPersistence">
										Solanacées Cucurbitacés<span class="caret"></span></a><span class="caret-ie"></span>
												<ul class="dropdown-menu">	
													<li><a href="/operations/Production/FILIERES/Forms/AllItems.aspx?RootFolder=/operations/Production/FILIERES/SOLANACEES%20CUCURBITACES/ANNEXE%20DV1&amp;InitialTabId=Ribbon.Document&amp;VisibilityContext=WSSTabPersistence">
													Annexe DV1</a></li>
													<li><a...

CSS

.MENU a, .item_list a
{
color:#0066FF
}

body li /*:nth-child(odd)*/
{
	margin-bottom:3px;
}
.ms-dlgContent

{  
    overflow:scroll;   
}

.MENU:after {
    content: "";
    display: inline;
    height: 0px;
    clear: both;
}

#banniere_site
{
	width: 100%;
	margin-left: 5px;
	border-radius:25px;
}
.ms-dlgFrame

{

    overflow:hidden;

}

.MENU 
{
	border-radius: 15px;
	border: 2px groove #0C0;
}

#item_list_1 a:hover, #item_list_2 a:hover {
	padding-left:10px;
	text-decoration:none;
	font-size: 125%;
	
}

#item_list_1:hover, #item_list_2:hover 
{
	box-shadow: 0px 0px 20px #65ff65;
}

.MENU ul:first-child {
	width: 195px;
}
#prez-title span.caret
{
	float: none;
	top: 10px;
	left: 3px;
}
#item_list_1
{
	width:226px;
	position:relative;
	border:medium outset #00FF00;
	background-color:#66FF66;
	height:auto;
	right:auto;
	bottom:auto;
	left:25px;
}
#item_list_1 ul
{
	list-style:none;left:-30px;
}
#item_list_2
{
	width:226px;
	position:relative;
	top:20%;
	left:25px;
	border:medium outset #00FF00;
	background-color:#66FF66;
	height:auto;
	right:auto;
	bottom:auto
}
#item_list_2 ul
{
	list-style:none;left:-30px;
}

.bloc
{
	padding:8px;
	border-style:none;
	background-color:rgb(204, 255, 102);
	color:#0066FF;
	position:relative;
	display:block;
	height:auto;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	left:0px;top:0px
	
}
#bloc5, #bloc6
{
	display:none;
		
}
.MENU:hover
{
	box-shadow: 0px 0px 20px #b5e51d;

}

.MENU img
{
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
/*-----------------2 MODE---------------------------------*/
.normal .dropdown-submenu:hover>.dropdown-menu {
	max-height:13em;
  	opacity:1;
  	position:relative;
	top:0px;
	left:25px;
    transition: 0.8s ease-in-out;
}

.normal .dropdown-menu {
  max-height:0em;
  transition: 0.5s ease-in-out;
  -webtkit-transition:2s ease-in-out;
  opacity:0;
  -moz-transition: 1s opacity...

JavaScript

$(".dropdown-menu").hide();
$(".caret").hide();
$(".dropdown-submenu").css("border", "1px solid red");
$('.dropdown-submenu').on('click', function(e){
    //alert('clicked');
    $(this).find(".dropdown-menu:first").toggle();
    e.stopPropagation();
});

$('.dropdown-submenu li').on('hover', function(e){
	$(".caret-ie").css("color", "blue");
	e.stopPropagation();
});
$('.dropdown-menu li').on('hover', function(e){
	$(this).find(".caret-ie").css("color", "blue");
	e.stopPropagation();
});