JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li><a href="#" data-slide-text="slide-aaa">aaa</a>
    </li>
    <li><a href="#" data-slide-text="slide-bbb">bbb</a>
    </li>
</ul>

CSS

#nav li {
    list-style: none;
    display: inline-block;
    width: 150px;
    color: #CCCCCC;
    line-height: 30px;
    text-align: center;
    overflow: hidden !important;
    white-space: nowrap;
}
#nav a {
    display: inline-block;
    width: 150px;
    z-index: 1;
    background: #777777;
}
.slideClass {
    display: inline-block;
    background: #000000;
    color: #6699dd;
    z-index: 3;
}

JavaScript

(function ($) {
    $.fn.doIt = function () {
        this.find('li')
            .css({
            overflow: 'auto'
        })
            .hover(

        function () {
            $(this).find('a:first').animate({
                marginLeft: "-150px"
            }, 'fast')
        },

        function () {
            $(this).find('a:first').animate({
                marginLeft: "0px"
            }, 'fast')
        })
        this.find('a')
            .each(function () {
            var slideText = $(this).data('slideText');
            $(this)
                .clone()
                .text(slideText)
                .appendTo($(this).parent())
                .addClass('slideClass')
        });
    };
})(jQuery);

$(document).ready(function () {
    $('#nav').doIt();
});