JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="topmenu">
    

<li class="top-default" page_id="1" pagepos="0"><a  href="?id=1" target="_self">Home</a>
<ul>
<li class="sub-default"><a  href="/admin/menu_layout.php?newpage=Y&menu_layout=S&mainmenu_id=1" target="_self">+ New Sub Page</a></li>
</ul>
</li>
<li class="top-default" page_id="225" pagepos="1"><a  href="?id=225" target="_self">About Us</a></li>
<li class="top-default" page_id="214" pagepos="2"><a  href="?id=214" target="_self">Directory Listing</a></li>
<li class="top-default" page_id="14" pagepos="3"><a  href="?id=14" target="_self">Contact Us</a></li>
<li class="top-default" page_id="137" pagepos="4"><a style='background-color:#FF3333' href="?id=137" target="_self">Login</a></li>
<li class="top-default" page_id="154" pagepos="5"><a  href="?id=154" target="_self">Online Shop</a></li>
<li class="top-default" page_id="157" pagepos="6"><a style='background-color:#FF3333' href="?id=157" target="_self">Shopping Cart</a></li>
<li class="top-default"><a  href="/admin/menu_layout.php?newpage=Y&menu_layout=T" target="_self">+ New Top Page</a></li></ul>

CSS

body { font-family: Arial, Helvetica, sans-serif; text-align:center; width:980px; }
#edit_menu_details { font-size:14px; text-align:left; background-color:#fff; width:900px; height:auto; margin:0 auto; padding:0 10px 5px 10px; }
#edit_menu_cont { font-size:9px; background-color:#E1E1E1; clear: left; height: auto; width: 900px; min-height: 600px; width: auto; margin: 0 auto; border: 1px solid #ccc; }
#topmenu { list-style-type:none; margin:0; padding:0; width:865px; clear:right; float:left; border-bottom:1px dotted #FFF; background-color:#C8C8C8; }
#topmenu li { float:left; width:90px; height:30px; margin-left:4px; line-height:13px; }
.top-default a:link, .top-default a:active, .top-default a:visited, .top-default a:hover { clear: none; color: #000; float: left; height: 26px; width: 90px; border: 1px solid #999; text-decoration: none; margin: 1px; }
.top-default a:hover { color:#030; border: 1px solid #030; }
.submenu { float:left; list-style-type:none; margin:0px; padding:0; height:auto; min-height:550px; clear:none; }
.submenu li { width: 90px; height: 30px; margin-left:4px; line-height:13px; }
.sub-default a:link, .sub-default a:active, .sub-default a:visited, .sub-default a:hover { clear:none; float:left; height:26px; width:90px; color:#000; border:1px solid #999; background-color:#f3f3f3; text-decoration:none; margin:1px; }
.sub-default a:hover { color:#030; border:1px solid #030; }
.submenux { list-style-type:none; padding:0; height:auto; clear:none; position:relative; left:94px; top:-30px; display:none; }
.submenux li { width: 90px; height: 30px; margin-left: 4px; line-height: 13px; }
.subx-default a:link, .subx-default a:active, .subx-default a:visited, .subx-default a:hover { clear:none; float:left; height:26px; width:90px; color:#000; border:1px solid #999; background-color:green; text-decoration:none; margin:1px; }
.subx-default a:hover { color:#030; border:1px solid #030; }
.arrow-right { width: 0; height: 0; border-top: 20px solid transparent;...