JSFiddle - React, Tailwind, and code Playground

by vikastyagi87

HTML

<ul>
    <li>
        <ul class="menu">
<li class="parent item64"><a href="/index.phpoption=com_virtuemart&amp;Itemid=64"><span>Laptop</span></a>
                <ul>
                    <li class="item105"><a href="/index.php?option=com_virtuemart&amp;Itemid=105"><span>HP</span></a></li>
                    <li class="item106"><a href="/index.php?option=com_virtuemart&amp;Itemid=106"><span>Lenovo</span></a></li>
                </ul>
            </li>
            
            <li class="parent item65"><a href="/index.php?option=com_virtuemart&amp;Itemid=65"><span>Desktops</span></a>
                <ul>
                    <li class="item110"><a href="/index.php?option=com_virtuemart&amp;Itemid=110"><span>lenovo</span></a></li>
                    <li class="item111"><a href="/index.php?option=com_virtuemart&amp;Itemid=111"><span>HP</span></a></li>
                </ul>
            </li>
            
            <li class="parent item96">
                <a href="/index.php?option=com_virtuemart&amp;Itemid=96"><span>DataCards</span></a>
            </li>
            
        </ul>
    </li>
</ul>

JavaScript

$('.parent ul').hide(0);

$('.parent').mouseover(function(){
   
           $('ul').show();
}).mouseout(function(){

     $('ul').hide();
});