JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="navWrapper">
        <div class="navSlide">
            <div class="nav nav01">
                <div class="item">
                    <a class="navItem">Item01</a>
                    <div>
                    <div class="dropdown"> 
                        <a>DropdownItem01</a>
                        <a>DropdownItem02</a>
                        <a>DropdownItem03</a>
                    </div>
                    </div>
                </div>
                <div class="item"><a class="navItem">Item02</a></div>
                <div class="item"><a class="navItem">Item03</a></div>
                <div class="clear">&nbsp;</div>
            </div>
            <div class="nav nav02">
                <div class="item"><a class="navItem">Item04</a></div>
                <div class="item">
                    <a class="navItem">Item05</a>
                    <div class="dropdown"> 
                        <a>DropdownItem01</a>
                        <a>DropdownItem02</a>
                        <a>DropdownItem03</a>
                    </div>
                </div>
                <div class="item"><a class="navItem">Item06</a></div>
                <div class="clear">&nbsp;</div>
            </div>
        </div>
    </div>
    <div class="toggle">TOGGLE!</div>
</div>

CSS

.wrapper {
    position: absolute;
    display: block;
    min-width: 600px;
    width: 100%;
    min-height: 100%;
    height: auto;
    top: 0;
    left: 0;
    background: #efefef;
    overflow: hidden;
}
.navWrapper {
    position: relative;
    display: block;
    width: 300px;
    height: auto;
    margin: 0 auto;
    font-size: 0;
    background: #ccc;
    /*overflow: hidden;*/
}
.navSlide {
    position: relative;
    display: block;
    width: 200%;
    margin: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}
.moveNav {margin: 0 0 0 -100%;}
.nav {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    font-size: 14px;
    height: auto;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}
.nav02, .moveNav .nav01 {opacity: 0;}
.nav01, .moveNav .nav02 {opacity: 1;}
.item {
    position: relative;
    display: block;
    float: left;
    cursor: pointer;
}
.navItem {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.clear {
    position: relative;
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
    clear: both;
}
.dropdown {
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    top: 100%;
    left: 50%;
    padding: 20px;
    transform: translateX(-50%);
    background: #fff;
    z-index: 2;
    -webkit-box
}
.item:hover .dropdown {display: block;}
.dropdown::before {
    content:'';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top: -6px;
    left: 50%;
    margin: 0 0 0 -6px;
    border-bottom: 7px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.toggle {
    position: relative;
    display: block;
    width: 300px;
    margin: 30px auto;
    text-align: center;
    background: #000;
    padding: 20px;
    color: #fff;
    cursor: pointer;
}

JavaScript

$(function() {
    $(".toggle").click(function() {
        $(".navSlide").toggleClass("moveNav");
    });
});