JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mydiv">
HELLOOOOOOOOO
<ul class="menu">
    <li><a href="http://www.egrappler.com">Home</a>

    </li>
    <li><a href="http://www.egrappler.com/about">About</a>

    </li>
    <li><a href="#">Services </a>

        <ul>
            <li><a href="#">Sofware Development</a>

                <ul>
                    <li><a href="#">Web Apps</a>

                    </li>
                    <li><a href="#">Widgets</a>

                        <ul>
                            <li><a href="#">jQuery Plugins</a>

                            </li>
                            <li><a href="#">Asp.NET Controls</a>

                            </li>
                            <li><a href="#">Salesforce Integration</a> 
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Interface Design</a>

            </li>
            <li><a href="#">Technical Writing</a>

            </li>
            <li><a href="#">Resume Writing</a>

            </li>
        </ul>
    </li>
    <li><a href="#">Portfolio</a>

        <ul>
            <li><a href="#">Web Appliations</a>

            </li>
            <li><a href="#">SaaS</a>

            </li>
            <li><a href="#">Windows Applications</a>

            </li>
            <li><a href="#">Mobile Applications</a>

            </li>
            <li><a href="#">Server Applications</a> 
            </li>
        </ul>
    </li>
    <li><a href="http://www.egrappler.com">Blog</a>

    </li>
    <li><a href="http://www.egrappler.com">Contact</a>

    </li>
</ul>
</div>

CSS

div.mydiv
{
    background-color:#CE04E3;
    overflow:hidden;
}
.menu, .menu ul {
     margin: 0;
     padding: 0;
     list-style-type: none;
     position: relative;
     line-height: 2.5em;
 }
 .menu a {
     text-decoration: none;
 }
 .menu > li {
     margin-left: 15px;
 }
 .menu > li:first {
     margin-left:0px!important;
 }
 .menu > li > a {
     padding: 0px 10px;
     margin: 0;
     width: 100%;
     text-decoration: none;
     color: #838383;
     font-weight: bold;
 }
 div.box {
     position: absolute;
     z-index: -1;
     background-color: #75CDD2;
     left: 0;
     top: 0;
     border-radius: 4px 4px 0px 0px;
     -moz-border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
 }
 li.pull-down {
     padding-right:6px;
 }
 li.pull-down > a {
     background-image: url('../images/darrow.png');
     background-position: 96% 75%;
     background-repeat: no-repeat;
     padding-right: 20px;
 }
 li.right-menu > a {
     background-image: url('../images/rarrow.png');
     background-position: 97% 45%;
     background-repeat: no-repeat;
 }
 .menu a.selected {
     background-color: #75CDD2;
     border-radius: 0px 4px 4px 4px;
     -moz-border-radius: 0px 4px 4px 4px;
     -webkit-border-radius: 0px 4px 4px 4px;
 }
 .menu li {
     float: left;
     position: relative;
 }
 .menu ul {
     position: absolute;
     display: none;
     width: 200px;
     top: 2.5em;
     /*padding-right: 10px;*/
     background-color: #75CDD2;
     /*-moz-opacity: .50;     filter: alpha(opacity=50);     opacity: .50;*/
     border-radius: 0px 4px 4px 4px;
     -moz-border-radius: 0px 4px 4px 4px;
     -webkit-border-radius: 0px 4px 4px 4px;
 }
 .menu li ul a {
     width: 180px;
     height: auto;
     float: left;
     color: #FFFEFD;
     padding: 0 10px;
 }
 .menu li ul li {
     padding: 0;
     margin: 0;
 }
 .menu ul ul {
     top: auto;
 }
 .menu li ul ul {
     left: 198px;
     /*margin: 0px 0 0 10px;*/
 }
 .menu-item-selected > a {
    ...

JavaScript

(function ($) {
     $.fn.extend({
         jqsimplemenu: function () {
             return this.each(function () {
                 //add class .drop-down to all of the menus having drop-down items
                 var menu = $(this);
                 var timeoutInterval;
                 if (!menu.hasClass('menu')) menu.addClass('menu');
                 $("> li", menu).each(function () {
                     if ($(this).find("ul:first").length > 0) $(this).addClass('pull-down');
                 });

                 $("> li ul li ul", menu).each(function () {
                     $(this).parent().addClass('right-menu');
                 });
                 $("li", menu).mouseenter(function () {
                     var isTopLevel = false;
                     //if its top level then add animation 
                     isTopLevel = $(this).parent().attr('class') === 'menu';
                     if (isTopLevel) {
                         clearTimeout(timeoutInterval);
                         var w = $(this).outerWidth();
                         // if ($(this).hasClass('pull-down')) w += 10;
                         var h = $(this).outerHeight();
                         var box = $('<div/>').addClass('box');
                         $('> li', menu).removeClass('selected');
                         $('>li div.box', menu).remove();
                         $('>li ul', menu).css('display', 'none').slideUp(0);
                         $(this).prepend(box);
                         $(this).addClass('selected');
                         box.stop(true, false).animate({
                             width: w,
                             height: h
                         }, 100, function () {
                             if ($(this).parent().find('ul:first').length === 0) {
                                 timeoutInterval = setTimeout(function () {
                                     box.stop(true, false).animate({
                                         height:...