JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
    <div id="container">
        <div id="nav-main">
            <ul id="main-menu" class="sm">
                <li><a href="#">About Us</a> 
                </li>
                <li><a href="#">Find a Hotel</a>

                    <ul id="find-a-hotel" class="sm-submenu">
                        <li><a href="#">Search from list</a>
                        </li>
                        <li><a href="#">Search by brand</a>
                        </li>
                        <li><a href="#">Search by travel objective</a>
                        </li>
                        <li><a href="#">Search hotels overseas</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Promotions</a>
                </li>
                <li><a href="#">Enjoy your stay in Japan</a>

                    <ul id="enjoy-your-stay-in-japan" class="sm-submenu">
                        <li><a href="#">The Premier Place to Stay in Tokyo</a>
                        </li>
                        <li><a href="#">Enjoy Onsen</a>
                        </li>
                        <li><a href="#">The Joys of the Washitsu</a>
                        </li>
                        <li><a href="#">Enjoying Japan with a Focus</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">News & Media</a>
                </li>
                <li><a href="#">Meetings & Banquet</a>
                </li>
                <li><a href="#">FAQ</a>

                    <ul id="faq" class="sm-submenu">
                        <li><a href="#">Online reservations</a>
                        </li>
                        <li><a href="#">Canceling a reservation</a>
                        </li>
                        <li><a href="#">Payments</a>
                        </li>
                        <li><a...

CSS

@charset"UTF-8";

/* start of YUI 3 CSS Reset */
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset, img {
    border:0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style:normal;
    font-weight:normal;
}
li {
    list-style:none;
}
caption, th {
    text-align:left;
}
h1, h2, h3, h4, h5, h6 {
    font-size:100%;
    font-weight:normal;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border:0;
    font-variant:normal;
}
sup {
    font-size:8px;
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input, textarea, select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
}
input, textarea, select {
    *font-size:100%;
}
legend {
    color:#000;
}
/* end of YUI 3 CSS Reset */
 body {
    color:#ad7e66;
    font-family:Arial, sans-serif;
    font-size:11px;
    background:url(images/bg.jpg) repeat-x scroll top center #fff;
    width: 100%;
}
a {
    color:#000;
    text-decoration:none;
}
a:hover {
    color:#DDD;
    text-decoration:underline;
}
#container {
    width:1150px;
    margin:50px auto 20px;
}
/* Optional stuff - end */

/* plugin customizations below */

/* SmartMenus Core CSS (it's not recommended editing this)
===============================================================*/
 .sm, .sm ul, .sm li {
    list-style:none;
    padding:0;
    margin:0;
    line-height:normal;
    direction:ltr;
}
ul.sm li {
    position:relative;
}
ul.sm a {
    position:relative;
}
ul.sm a.disabled {
    cursor:default;
}
ul.sm ul {
    position:absolute;
    top:-9999999px;
    left:-800px;
    width:100px;
}
ul.sm li {
    float:left;
}
ul.sm-rtl {
    direction:rtl;
}
ul.sm-rtl li {
    float:right;
}
ul.sm ul li, ul.sm-vertical li {
    float:none;
}
ul.sm a {
    white-space:nowrap;
}
ul.sm ul a,...

JavaScript

/*! SmartMenus jQuery Plugin - v0.9.0 - June 1, 2013
 * http://www.smartmenus.org/
 * Copyright 2013 Vasil Dinkov, Vadikom Web Ltd. http://vadikom.com; Licensed MIT */
(function (t) {
    function s(s) {
        if (h || s) h && s && (t(document).unbind(".smartmenus_mouse"), h = !1);
        else {
            if (window.navigator.msPointerEnabled) t(document).bind("MSPointerOver.smartmenus_mouse", function (t) {
                n = 4 == t.originalEvent.pointerType
            });
            else {
                var e = !0,
                    o = null;
                t(document).bind({
                    "mousemove.smartmenus_mouse": function (s) {
                        var a = {
                            x: s.pageX,
                            y: s.pageY,
                            timeStamp: (new Date).getTime()
                        };
                        if (o) {
                            var r = Math.abs(o.x - a.x),
                                h = Math.abs(o.y - a.y);
                            if ((r > 0 || h > 0) && 2 >= r && 2 >= h && 300 >= a.timeStamp - o.timeStamp && (n = !0, e)) {
                                var l = t(s.target);
                                l.is("a") || (l = l.parentsUntil("a").parent()), l.is("a") && t.each(i, function () {
                                    return t.contains(this.$root[0], l[0]) ? (this.itemEnter({
                                        currentTarget: l[0]
                                    }), !1) : void 0
                                }), e = !1
                            }
                        }
                        o = a
                    },
                    "touchstart.smartmenus_mouse": function () {
                        n = !1
                    }
                })
            }
            h = !0
        }
    }
    var i = [],
        e = !! window.createPopup,
        o = e && !document.defaultView,
        a = e && !document.querySelector,
        r = e...