JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <nav id="test">
        <ul id="cbmi">
            <li id="bm1" class="bmi"></li>
            <li id="bm2" class="bmi"></li>
            <li id="bm3" class="bmi"></li>
        </ul>
    </nav>
    <div id="deroule"></div>
</body>

CSS

nav {
	background:green;
    color: white;
}
	div#deroule{
		background:red;
		position: absolute;
		width: 120px;
		left: -60px;
		height: 100px;
	}

JavaScript

$(document).ready(function(){
    $('nav').mouseenter(function() {
        $('#deroule').animate({
            left : "60px"
        },500);
    });
    $('nav').mouseleave(function() {
        $('#deroule').animate({
            left : "-60px"
        },500);
    });
});