JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-navigation">
    <ul>
        <li><a>Menu-item#1</a></li>
        <li><a>Menu-item#2</a></li>
        <li><a>Menu-item#3</a></li>
        <li><a>Menu-item#4</a></li>
    </ul>
</nav>

CSS

li a {
    width: 200px;
    height: 30px;
    padding: 10px;
    text-align:center;
}

li {
    height: 50px;
    width: 250px;
    text-align: center;
    border: 1px solid black;
}

JavaScript

jQuery(document).ready(function($){
$(".main-navigation a").mouseover(function() {
	$(this).parent().animate({
	backgroundColor: "green"
	}, "slow"),
	$(this).parent().animate({
	backgroundColor: "transparent"
	})
	.mouseleave(function() {
	$(this).parent().animate({
	backgroundColor: "transparent"
	}, "slow")
	});
	});
});