JSFiddle - React, Tailwind, and code Playground

HTML

<div id="filemenu">                     <!-- right tabs menu -->
            <ul id="fm_ul">
                <li class="filetabs">File
                    <ul class='cDropDownItems'>
                        <li class="m_items"><a href="#"><span class="aHeading">New</span><span class="shortcutK">Ctrl-U</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Open</span><span class="shortcutK">Ctrl-Z</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Save</span><span class="shortcutK">Ctrl-T</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Exit</span><span class="shortcutK">Ctrl-Q</span></a></li>
                    </ul></li><li class="filetabs">Edit
                    <ul class='cDropDownItems'>
                        <li class="m_items"><a href="#"><span class="aHeading">Undo</span><span class="shortcutK">Ctrl-M</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Redo</span><span class="shortcutK">Ctrl-S</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Zoom In</span><span class="shortcutK">Ctrl-R</span></a></li>
                        <li class="m_items"><a href="#"><span class="aHeading">Zoom Out</span><span class="shortcutK">Ctrl-Q</span></a></li>

                    </ul></li><li class="filetabs cLastFileTabs">Settings
                    <ul class='cDropDownItems'>
                        <li class="m_items m_itemsCK" id="frontView"><a href="#"><img src="Img/tickB&W1.png" alt="tick" /><div class="filler"></div><span class="aHeading">Front View</span><span class="shortcutK">Ctrl-A</span></a></li>
                        <li class="m_items m_itemsCK" id="backView"><a href="#"><img src="Img/tickB&W1.png" alt="tick" /><div class="filler"></div><span class="aHeading">Back View</span><span class="shortcutK">Ctrl-Z</span></a></li>
                 ...

CSS

#filemenu {
        float: right;
        width: 50%;
            height: 50px;
        margin: 0 25%;
    }
    #fm_ul {
        float: right;
        display: block;
        width: 100%;
        height: 100%;
        cursor: pointer;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);                 /* Opera & IE9 donot have prefixes, directly support border-radius */
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
/* .filetabs are the 'file menu' tabs on the right */
        .filetabs {
            display: inline-block;
            position: relative;
            width: 33.33%;
            height: 100%;
            text-align: center;
            vertical-align: middle;
            list-style-type: none;
            color: rgb(125,125,125);
            font-size: 0.8em;
            line-height: 20px;
            text-align: center;
            text-decoration: none;
            -moz-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
            -webkit-text-shadow: 0 1px 2px rgba(150,150,150,0.4);
            text-shadow: 0 1px 2px rgba(150,150,150,0.4);                        
            background: rgb(232,232,232); /* Old browsers */
            background: -moz-linear-gradient(top, rgb(232,232,232) 0%, rgb(252,252,252) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(232,232,232)), color-stop(100%,rgb(252,252,252))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* IE10+ */
            background: linear-gradient(top, rgb(232,232,232) 0%,rgb(252,252,252) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient(...

JavaScript

$('.filetabs').on('click', function (e)
{
        function abc() {
            if ($(curTab).hasClass ('cLastFileTabs'))
            {
                $('ul', curTab).css ({left: '-66.6%'});
                $('ul',curTab).animate ({opacity: 1}, 300, 'linear');
            }    else
            {
                $('ul', curTab).css ({left: 0});
                $('ul', curTab).animate ({opacity: 1}, 300, 'linear');
            }
        }
    var aFileTabs = $('.filetabs');
    var curTab = $(this);
    if ($('.cTabActive').length){
        var prevDropDown = $('.cTabActive').parent();
        var prevDDChild = $(prevDropDown).children(0);
        $(prevDDChild).removeClass('cTabActive');
        $(prevDDChild).addClass('cPrevTabActive');            
        $(aFileTabs).children('ul').animate({opacity: 0}, 200, 'linear', function ()
            {
                $('ul', aFileTabs).css ({left: '9999px'});
                $('ul', aFileTabs).removeClass ('cPrevTabActive');
            });
        if ($(prevDropDown).get(0) !== $(curTab).get(0)){   
            $(curTab).children(0).addClass('cTabActive');
            setTimeout(abc,250);
        }
    } else {
        $(curTab).children(0).addClass ('cTabActive');
        abc();
    }
});