JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dd_menu">
<li><a href="../rma/rmaPage.php">Home</a></li>
<li><a href="#">Service Order</a>
            <ul>
            <li><a href="../searchServiceOrder.php?groupID='.$groupID.'">Service Order List & Search</a></li>
            </ul></li>

CSS

.dd_menu     {
    padding:0px; 
    margin:0px; 
    list-style-type:none; 
    height:30px;
    position:relative;
    z-index:1;
}

.dd_menu li     {
    float:left; 
    height:30px;
}

.dd_menu li a     {
    padding:9px 20px; 
    display:block; 
    text-decoration:none;
}

.dd_menu li:hover a {
    text-decoration:underline;
}

.dd_menu ul    {
    position:absolute; 
    left:-9999px; 
    top:-9999px; 
    list-style-type:none;
}

.dd_menu li:hover    {
    position:relative;
}

.dd_menu li:hover ul     {
    left:0px; 
    top:30px;  
    padding:3px; 
    width:160px;
}

.dd_menu li:hover ul li     {
    height:18px; 
    border:none;
}

.dd_menu li:hover ul li a     {
    height:18px; 
    padding:0px; 
    display:block; 
    width:158px; 
    line-height:18px; 
    text-indent:5px;
}

.dd_menu li:hover ul li a:hover {
    height:18px;
}

.dd_menu {padding:0px; margin:0; list-style-type:none; height:30px;}
.dd_menu li {float:left; height:30px; border-right: solid 1px white;}
.dd_menu li a {padding:9px 20px; display:block; color:#fff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif;}
.dd_menu li:hover a {text-decoration:none;}

.dd_menu ul {position:absolute; left:-9999px; top:-9999px; list-style-type:none;}
.dd_menu li:hover {position:relative; background:#B0C4DE;}
.dd_menu li:hover ul {left:0px; top:30px; background:lavender; padding:3px; border:1px solid grey; width:192px;}
.dd_menu li:hover ul li {height:18px; border:none;}
.dd_menu li:hover ul li a {height:18px; padding:0px; display:block; font-size:11px; width:190px; line-height:18px; text-indent:5px; color:#444; background-color:lavender; text-decoration:none; border:1px solid transparent;}
.dd_menu li:hover ul li a:hover {height:18px; background:silver; color:#000; border:solid 1px #444;}