JSFiddle - React, Tailwind, and code Playground

HTML

<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="navmenu">
                <!--#navmenu DIV menu contents start here-->
                <ul>
                    <li> <a href="index.php" class="mainlist">HOME</a>

                    </li>
                    <li> <a href="about.php" class="mainlist">ABOUT ME</a>

                    </li>
                    <li class="slidedown"> <a href="graphicdesign.php" class="mainlist">GRAPHIC DESIGN</a>

                        <ul>
                            <li><a href="graphicdesign/hobbyist-independent.php">Hobbyist/Independent</a>

                            </li>
                            <li><a href="graphicdesign/job&amp;freelance.php">Job & FreeLance</a>

                            </li>
                            <li><a href="graphicdesign/universityatbuffalo.php">University At Buffalo</a>

                            </li>
                        </ul>
                    </li>
                    <li class="slidedown"> <a href="webdesign.php" class="mainlist">WEB DESIGN</a>

                        <ul>
                            <li>Hobbyist/Independent</li>
                            <li>Job & FreeLance</li>
                            <li>University At Buffalo Website</a>
                            </li>
                        </ul>
                    </li>
                    <li class="slidedown"> <a href="photography.php" class="mainlist">PHOTOGRAPHY</a>

                        <ul>
                            <li><a href="photography/hobbyist-independent.php">Hobbyist/Independent</a>

                            </li>
                            <li><a href="photography/job&amp;freelance.php">Job & Freelance</a>

                            </li>
                            <li><a href="photography/studentprojects.php">Student Projects</a>

                            </li>
     ...

CSS

html, body {
    height: 100%;
    overflow-x:hidden;
    overflow-y:hidde;
    margin:auto;
}
#wrap {
    margin:auto;
    min-height: 100%;
    background-image: url(style/flourish-bg.png);
    background-repeat:no-repeat;
    background-position: top center;
    z-index:0;
}
#header {
    width:1024px;
    height:160px;
    background-repeat: no-repeat;
}
#bgheader {
    background-image: url(style/bgheader.jpg);
    background-repeat:repeat-x;
    height:160px;
}
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    background-repeat: no-repeat;
    background:#000;
}
/*----------MENU-----------*/

/*main menu*/
 a:link {
    color:#fff;
    text-decoration:none;
}
a:visited {
    color: #868D65;
}
a:hover {
    color:#000;
}
a:active {
    color: #868D65;
}
#navmenu {
    width:100%;
    height:80px;
    margin-right:auto;
    margin-left:auto;
}
/*holds the listed items on main menu*/
 #navmenu ul {
    width:100%;
    margin:0;
    padding: 0;
    list-style:none;
    text-decoration:none;
}
/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
 #navmenu li {
    float:left;
    padding: 30px 7px;
    position:relative;
    list-style:none;
    text-decoration:none;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    text-decoration: none;
    border-top: 2px solid #868D65;
    border-bottom: 2px solid #868D65;
    transition: border-radius 1s, background 1s;
    -moz-transition: -moz-border-radius 1s, background 1s;
    -webkit-transition: -webkit-border-radius 1s, background 1s;
    z-index:200;
}
/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
 #navmenu li:hover {
    background: #eee;
    background-image: url(style/bgheader.jpg);
    transition: border-radius 1s, background 1s;
    -moz-transition: -moz-border-radius 1s, background 1s;
    -webkit-transition: -webkit-border-radius 1s, background 1s;
   ...