JSFiddle - React, Tailwind, and code Playground

HTML

<!-- START: menu -->
    <nav id="main-menu" class="container">
    <ul id="menu" class="content">
        <li class="menu" ><a href="#">Menu 1</a></li>
        <li class="menu" ><a href="#">Menu 2</a></li>
        <li class="menu" ><a href="#">Menu 3</a>
            <ul class="submenu" >
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
            </ul>
        </li>
        <li class="menu" id="resident"><a href="#">Menu 4</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
            </ul>
        </li>
        <li class="menu" id="community"><a href="#">Menu 5</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
                <li><a href="#">Sub 8</a></li>
            </ul>        
        </li>
        <li class="menu"><a href="#">Menu 6</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
               ...

CSS

@charset "utf-8";
body { background: url(http://www.fchdata.com/beta/images/body_rpt.jpg); }
.doc {
    width: 100%;
    margin: 0;
    padding: 0;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
/******* FUNCTIONALITY ***********************************************************************************************************
    (Hide menu/Set sub-menu to the right)
        Documentation:
        http://stackoverflow.com/questions/4873604/css-menu-without-javascript
        http://www.htmldog.com/articles/suckerfish/dropdowns/
*/
    /* Menus */
#main-menu #menu                        { position: relative; border: solid black 1px; z-index: 100;}
#main-menu #menu>li                    { display: inline-block; }
    /* Submenus */
#main-menu #menu li>.submenu            { position: absolute; left: -999em; }
#main-menu #menu li:hover>.submenu    { display: block; left: auto; width: 12em; }



/******* STYLE ***********************************************************************************************************
    Looks and feel of the menus and submenus
*/
    /* GENERAL SETTINGS */
#main-menu ul                { list-style-type: none; }
#main-menu #menu a            { display: block; text-decoration: none; }
#main-menu .menu a            { padding: 0.8em .8em; } /* menu: left-right padding | submenu: top-bottom */
#main-menu #menu li            { vertical-align: middle; white-space: nowrap; }
#main-menu img, #main-menu a    { border: none; outline:none; }


    /* container */
#main-menu { background-image: url('http://www.firstchoicehousing.com/_img/menu/nav.jpg'); }


    /* menu */
#main-menu #menu {
    padding: 0px;
    background-image: url('http://www.firstchoicehousing.com/_img/menu/menu.jpg');
}
#main-menu .menu>a {
    color: #a6625a;
    font-size: 0.795em; 
    font-family: "Arial Narrow", Arial, Gadget, sans-serif;
    text-transform: uppercase;
    padding: 1em .5em;
}
#main-menu .menu>a:hover        { color: #ecc676; background: #270909;...