JSFiddle - React, Tailwind, and code Playground

HTML

<div id="smoothmenu1" class="ddsmoothmenu">
    <div class="wrapper">
        <ul>
            <li><a href="Default.aspx">Home</a></li>
            <li><a href="About.aspx">About Us</a></li>
            <li><a href="#">Automotives</a>
                <ul>
                    <li><a href="#">Masking Film</a></li>
                    <li><a href="#">Promo Items</a></li>
                    <li><a href="#">Accessories</a></li>
                    <li><a href="#">External Protection</a></li>
                    <li><a href="#">Internal Protection</a></li>
                </ul>
            </li>
            <li><a href="#">Packaging</a>
                <ul>
                    <li><a href="#">Cardboard boxes</a>
                        <ul>
                            <li><a href="#">Big Boxes</a></li>
                            <li><a href="#">Small Boxes</a></li>
                            <li><a href="#">Medium Boxes</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Paper bags</a></li>
                    <li><a href="#">Polythene bags</a></li>
                    <li><a href="#">Polythene layflat tubing</a></li>
                    <li><a href="#">Postall bags &amp; packaging</a></li>
                    <li><a href="#">Protective Packaging</a></li>
                    <li><a href="#">Refuse sacks</a></li>
                    <li><a href="#">Retail</a></li>
                    <li><a href="#">Strapping</a></li>
                    <li><a href="#">Tapes</a></li>
                </ul>
            </li>
            <li><a href="#">Eco Friendly</a>
                <ul>
                    <li><a href="#">Recycled bags</a></li>
                    <li><a href="#">Degradable bags</a></li>
                    <li><a href="#">Random bags</a></li>
                    <li><a href="#">Cotton bags</a></li>
                    <li><a href="#">Compostable bags</a></li>
                </ul>
            </li>
           ...

CSS

.ddsmoothmenu{
    font: bold 12px Verdana;
    background: #2773A0; /*background of menu bar (default state)*/
    width: 100%;
    background-image: url(../images/menuBG.jpg);
    z-index:9999;
    overflow: hidden;
}

.ddsmoothmenu .wrapper {
    position: relative;
    left: 50%;
    float: left;
}

.ddsmoothmenu ul{
    z-index:9999;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    left: -50%;
    position: relative;
}

/*Top level list items*/
.ddsmoothmenu ul li{
    position: relative;
    display: inline;
    float: left;
    z-index:9999;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
    display: block;
    
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #ffffff;
    color: #2d2b2b;
    text-decoration: none;
    padding: 10px 30px 10px 30px;
    font-size: 18px;
    font-family: Arial;
    font-weight:normal;
    z-index:9999;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    z-index:9999;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
    color: white;
    
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    background: #2773A0; 
    color: white;
    z-index:9999;
}

.ddsmoothmenu ul li a:hover{
    background: #4FA2D2; /*background of menu items during onmouseover (hover state)*/
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
    position: absolute;
    left: 0;
    display: none; /*collapse all sub menus to begin with*/
    visibility: hidden;
    z-index:9999;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
    display: list-item;
    float: none;
    background: #2773A0; /*background of menu items (default state)*/
    z-index:9999;
    border-right: 0px;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
    top: 0;
   ...