JSFiddle - React, Tailwind, and code Playground

by yosafatade

HTML

<li class="tab"><a href="#" class="active" title="one">Sport</a>

                    <ul id="level1" class="one">
                    <li><a href="#">View All</a></li>
                    <li><a href="#" >Shoes</a></li>
                    <li><a href="#" >T-Shirt</a></li>
                    <li><a href="#" >Tools</a></li>
                    <li><a href="#" >Hats</a></li>
                    <li><a href="#">Pants</a></li>
                    </ul>


                </li>

                <li class="tab"><a href="#" title="two">Foods</a>

                    <ul id="level1" class="two">
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    <li><a href="#">Link Here</a></li>
                    </ul>


                </li>

JavaScript

$(document).ready(function(){
 $('ul#level1').slideUp();
       $('li').hover(function(){
                 var content_show = $(this).children('a').attr('title');
                $('.'+ content_show).stop().slideDown();
                
            },function(){


                var content_show = $(this).children('a').attr('title');
                $('.'+ content_show).stop().slideUp();


            });
 });