JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<ul role="primary">
    <li class="page_item page-item-7"><a href=" /services/">Services</a>

        <ul class='children'>
            <li class="page_item page-item-23"><a href=" /services/accounts-production/">Accounts Production</a>

            </li>
            <li class="page_item page-item-25"><a href=" /services/audit/">Audit</a>

            </li>
            <li class="page_item page-item-27"><a href=" /services/tax-planning/">Tax Planning</a>

            </li>
            <li class="page_item page-item-29"><a href=" /services/business-startup-advice/">Business Startup Advice</a>

            </li>
            <li class="page_item page-item-31"><a href=" /services/accounting-systems/">Accounting Systems</a>

            </li>
            <li class="page_item page-item-33"><a href=" /services/payroll-bureau/">Payroll Bureau</a>

            </li>
        </ul>
    </li>
</ul>

JavaScript

$('ul[role="primary"] li ul.children').hide();

$('ul[role="primary"]>li').addClass('parent').mouseover(function () {

    $('ul.children').show();

});
$('ul[role="primary"]>li').removeClass('parent').mouseout(function () {

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

});