JSFiddle - React, Tailwind, and code Playground

HTML

Hover your mouse over Home to see the submenu.

            <div class="menu1 amenu1 abs r5" style="font-size: 14px;background-color:#09F; width:500px"><ul class="menu"><li><a class="haschild" title="" href="">Home</a><ul class="sub-menu"><li><a class="haschild" title="" href="">Sub Link 1</a><ul><li><a href="" class="testmmm">Sub Sub Link 1</a></li><li><a href="">Sub Sub Link 2</a></li><li><a href="">Sub Sub Link 3</a></li></ul></li><li><a href="">Sub Link 2</a></li><li><a href="">Sub Link 2</a></li></ul></li><li><a href="">About Us</a></li><li><a href="">Blog</a></li><li><a href="">Portfolio</a></li><li><a href="">Contact us</a></li></ul></div>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.menu1 * {
    margin: 0;
    padding: 0;
}

.menu1 ul.menu{
    text-align:center;
    font-family: sans-serif;
}

.menu1 ul.menu li{
    position: relative;
    list-style-type: none;
    display:inline;
    display:inline-block;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}
.menu1 ul.menu li a{
    position: relative;
    display: block;
    line-height: 18px;
    padding: 12px 20px;
    text-decoration: none;
    z-index: 100;
}
.menu1 ul.menu > li:first-child > a{
    border-left: 0!important;
}
.menu1 ul.menu > li:last-child > a{
    border-right: 0!important;
}
.menu1 ul.menu li ul.sub-menu{
    position: relative;
    display: none;
    margin: 0;
    padding: 0;
}

.menu1 ul.menu li:hover ul.sub-menu{
    display: block;
    float: left;
    position: absolute;
    z-index: 200;
}
.menu1 ul.menu li:hover ul.sub-menu {
    width: 140px;
}
.menu1 ul.menu li ul.sub-menu > li:first-child{
    margin: 6px 0 0 0;
}
.menu1 ul.menu li...