JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li class="link">ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li class="link">PROJECTS
            <ul class="sub-menu">
                <li>ONE</li>
                <li>TWO</li>
            </ul>
        </li>
        <li>CONTACT</li>
    </ul>
</nav>

CSS

nav li {
        display: inline-block;
        _display: inline; /* IE<8 */
        list-style: none;
        vertical-align: top;
        line-height: 22px;
        height: 22px;
    }
.sub-menu {
        display: inline-block;
        white-space: nowrap;
        padding: 0;
        margin: 0;
    }

JavaScript

$(document).ready(function () {
        $('.sub-menu').hide();

        $('.link').hover(
            function() {            
                $('.sub-menu', this).stop().animate({
                    width: 'toggle',
                    opacity: 'toggle'
                } /* [, duration in ms] */);
            }
        );
    });