JSFiddle - React, Tailwind, and code Playground

HTML

<li id='category_1'>
  <div class='item_menu'>
     <div class='titre' style='display:none;'>menu 1 title</div>
  </div>
</li>
<li id='category_2'>
  <div class='item_menu'>
     <div class='titre' style='display:none;'>menu 2 title</div>
  </div>
</li>

CSS

.item_menu {
    width:200px;
    height:100px;
    background:red;
}

.titre {
    width:200px;
    height:100px;
    background:yellow;
}

li {
 	list-style-type:none;   
}

JavaScript

$('.item_menu').mouseover(function(){
	$(this).children('.titre').show('slide', {direction:'right'});
});

$('.item_menu').mouseout(function(){
	$(this).children('.titre').hide('slide', {direction:'right'});
	
});