JSFiddle - React, Tailwind, and code Playground

HTML

<table width=950>
<tr><td>    
<div class="mainmenu">
        <ul>
          <li class="li_nc"><a href="index.php" >&nbsp;Home</a></li>
          <li class="li_hc"><a href="#"  >&nbsp;&nbsp;Programs</a><ul class="ul_ch">
             <li class="li_hc"><a href="#"  >Engineering</a><ul class="ul_ch">

                <li class="li_nc"><a href="#"  >BEE ( Electronics 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BEE ( Tele Comm. 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BSE ( Software 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BCE (Computer 4 Years)</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Management Sciences</a><ul class="ul_ch">

                <li class="li_nc"><a href="#"  >BBA ( Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 3 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 2 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 1 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Weekend )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Pharma )</a></li>

                <li class="li_nc"><a href="#"  >Ph.D Management</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Earth & Environmental Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS  ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS ( Environmental Policy & Management )</a></li>

                <li class="li_nc"><a href="#"  >MS & Ph.D ( Environmental )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Professional Psychology</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >PMD ( 1 Year )</a></li>
    ...

CSS

/* pull-down mainmenu css code starts here*/
.mainmenu{
    float  : left;
    width  : 100%;
    height : 30;
    padding: 0;
    
    margin-bottom:0;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    border-width:0;
    
    z-index:10;
    
}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#e0e0e0;
    background: #333333;
    padding: 0;
    border: 0;
    border-width: 0;
    margin: 0;
    
    z-index:10;
}

.mainmenu a, .mainmenu a:visited {
    display: block;
    font-family:Verdana;
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    color: #e0e0e0;
    text-decoration: none;
    padding: 1em 1em;
    
    z-index: 10;
    
    
}
.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
    
    background:url("../images/seperator.gif") bottom right no-repeat;
}

.mainmenu ul li {float:left; position:relative;  }
.mainmenu ul li a {white-space:nowrap;}
    
.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em;    
    
    background: #333333;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width:15em ;
}

.mainmenu li li a{
    width:13em ;
    background:url("../images/sun_seperator.gif") bottom left no-repeat;
}

.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}

.mainmenu li:hover{
    background: #0552a7;
}

.mainmenu li:hover...