JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="topmenu">

    <li class="menusublink">
        <ul class="submenu">
            <li class="menusublink2">
                <ul class="submenu2">
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                    <li><a href="#">Four</a></li>
                </ul>
                <a href="#" >One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
        </ul>
        
        <a href="#">HOME PAGE</a></li>

<li><a href="#">ABOUT US</a></li>

<li><a href="#">OUR SERVICES</a></li>

<li><a href="#">REGISTER</a></li>

<li><a href="#">CONTACT US</a></li>

</ul>

CSS

ul#topmenu{
margin:0 auto;
padding-top:15px;
height:30px;
border-top:#abe5fb 1px solid;
border-bottom:#028fc1 1px solid;
border-left:#abe5fb 1px solid;
border-right:#028fc1 1px solid;

background: #37b9eb; /* Old browsers */
background: -moz-linear-gradient(top, #37b9eb 0%, #abe5fb 0%, #57ccf7 1%, #47c4f2 26%, #16aae1 70%, #01a0d9 96%, #1fabde 98%, #29b5eb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#37b9eb), color-stop(0%,#abe5fb), color-stop(1%,#57ccf7), color-stop(26%,#47c4f2), color-stop(70%,#16aae1), color-stop(96%,#01a0d9), color-stop(98%,#1fabde), color-stop(100%,#29b5eb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #37b9eb 0%,#abe5fb 0%,#57ccf7 1%,#47c4f2 26%,#16aae1 70%,#01a0d9 96%,#1fabde 98%,#29b5eb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #37b9eb 0%,#abe5fb 0%,#57ccf7 1%,#47c4f2 26%,#16aae1 70%,#01a0d9 96%,#1fabde 98%,#29b5eb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #37b9eb 0%,#abe5fb 0%,#57ccf7 1%,#47c4f2 26%,#16aae1 70%,#01a0d9 96%,#1fabde 98%,#29b5eb 100%); /* IE10+ */
background: linear-gradient(to bottom, #37b9eb 0%,#abe5fb 0%,#57ccf7 1%,#47c4f2 26%,#16aae1 70%,#01a0d9 96%,#1fabde 98%,#29b5eb 100%); /* W3C */

}
ul#topmenu li{
float:left;
width:19.5%;
text-align:center;
    display:block;
    height: 100%;
}
ul#topmenu li:last:child{float:right;}
ul#topmenu li:first-child a{
border-left:none;
}
ul#topmenu li a{
font:bold 11px Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
padding:0 20px;
display:block;
border-left:1px dotted #FFFFFF;
}
 
ul#topmenu li a:hover{
    color:yellow;
}

ul#topmenu .submenu2{background:white; width:200px;left:200px; position:absolute;border:1px solid gray; top:10px; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; padding:10px;display:none;}

ul#topmenu .submenu{background:white; width:200px;left:20px; position:absolute;border:1px solid gray; top:40px;...

JavaScript

$('li.menusublink').hover(function() {
    $('.submenu').show();
}, function() {
    $('.submenu').hide();
});

$('li.menusublink2').hover(function() {
    $('.submenu2').show();
}, function() {
    $('.submenu2').hide();
});