JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


<ul class="list-categories">
	<li class="cat-item cat-item-9"><a href="#" class="">All News (parent)</a>
    <ul class="children">
      <li class="cat-item cat-item-19"><a href="#" class="">Category 1</a>
      </li>
      <li class="cat-item cat-item-16"><a href="#" class="">Category 2</a>
      </li>
      <li class="cat-item cat-item-10"><a href="#" class="">Category 3</a>
      </li>
    </ul>
</li>
</ul>

CSS

.list-categories li {float:left; list-style:none;}
.list-categories li a {
    background-color: #fff;
    border-radius: 7px;
    color:blue !important;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0.8em;
    margin-left: 10px;
    moz-border-radius: 5px;
    padding: 0px 22px;
    webkit-border-radius: 5px;
    margin-bottom: 10px;
    transition: 0.3s ease;
    }


.list-categories li a.active-btn {
    background-color:green;
    color: #ffffff !important;
}

JavaScript

$(".list-categories li a").hover( function(){

   $(this).toggleClass("active-btn");

	});