JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation_bar">
    <ul class="menu_list">
        <li class="a_menu_item about">About Us</li>
        <li class="a_menu_item theater">Theater</li>
        <li class="a_menu_item leader">Leadership Team</li>
        <li class="a_menu_item career">Careers</li>
        <li class="a_menu_item contact">Contact Us</li>
    </ul>
</div>

<div class="submenu_about" style="display: none;">
     <ul class="items_list" style="list-style:none">
        <li class="a_sub_menu_item"><a href="#">News and Events</a></li>
        <li class="a_sub_menu_item"><a href="">Financial Assistance</a></li>
        <li class="a_sub_menu_item"><a href="">Who We See</a></li>
        <li class="a_sub_menu_item"><a href="">Insurance Information</a></li>
    </ul>
</div>

JavaScript

$('.about').on('mouseenter', function() {
    $(this).css({
        'background': '#144f19'
    });
    $('.submenu_about').css({
        'display': 'block',
        'position': 'absolute'
    });
    $('.items_list').on('mouseout', function() {
        $('.submenu_about').css({
            'display': 'none',
            'opacity': '0px'
        });
        $('.about').css({
            'background': 'none'
        });
    })
});