JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu horizontal menu-horizontal">
    <ul class="root static">
        <li class="static">
<a class="static menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">HOME</span>
</span>
</a>

        </li>
        <li class="static dynamic-children">
<a class="static dynamic-children menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">ABOUT</span>
</span>
</a>

            <ul class="dynamic" style="">
                <li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">WHO WE ARE</span>
</span>
</a>

                </li>
                <li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">OUR STRATEGY</span>
</span>
</a>

                </li>
                <li class="dynamic">
<a class="dynamic menu-item" href="">
<span class="additional-background">
<span class="menu-item-text">OUR CLIENTS</span>
</span>
</a>

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

CSS

ul.dynamic { display:none }

JavaScript

<script type="text/javascript">

$(document).ready(function () {

         $('li.dynamic-children').find('ul.dynamic').css("display","none");

}); </script>

<script type="text/javascript">
$(document).ready(function () {
    $('li.dynamic-children').on('hover',function () {
     $(this).addClass("hover");
         $(this).find('ul.dynamic').slideToggle();
         $(this).find('ul.dynamic').css('left','-1px');
         $(this).find('ul.dynamic').css('top','43px');
    });
}); </script>