JSFiddle - React, Tailwind, and code Playground

HTML

<div id='results'>
    <ul>
        <li> 
            <span>home</span>
            <ul class='subnav'>
                <li> home a </li>
                <li> home b </li>
                <li> home c </li>
            </ul>
        </li>
    </ul>
</div>

CSS

#results{
    background-color: #456878;
    height: 150px;
    width: 150px;
    border: 1px solid #888;
}

.subnav{
   display: none;
   position: relative;
   left: 15px; 
}

JavaScript

$('#results li').hover(function(){
    $(this).find('ul').animate({opacity:'show'},'slow');
});
$('#results li').mouseleave(function(){
    $(this).find('ul').animate({opacity:'hide'},'slow');
});