JSFiddle - React, Tailwind, and code Playground

HTML

<?php $item_limit=4; ?>
<ul id="css3menu_top" class="topmenu">
<li class="topmenu"><a href="#"><span>Homepage</span></a></li>
<li class="topmenu"><a href="#"><span>About Us</span></a>
	<div class="submenu">
    		<div class="column">
            	<ul>
                <li><a href="/login">Login</a></li>
                <li><a href="/contact">Contact Us</a></li>
				<?php
                $menu1="SELECT * from websitepages where pagetype = 'About' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
					if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
				?>
				</ul>
            </div>
	</div>
</li>

<li class="topmenu"><a href="#"><span>Telecoms</span></a>
	<div class="submenu" >
    		<div class="column">
            	<ul>
				<?php
                $menu1="SELECT * from websitepages where pagetype = 'Telecoms' order by pagedesc ASC ";
                $menu2=mysql_query($menu1,$conn) or die(mysql_error());
                $counter=0;
                while($menu3=mysql_fetch_array($menu2))
                {
                    $counter++;
                    echo '<li><a href="/index.php?p='.$menu3["pagename"].'">'.$menu3["pagedesc"].'</a></li>';
					if ($counter==$item_limit) { echo '</ul></div> <div class="column" style="width:50%"><ul>'; $counter=0; }
                }
				?>
				</ul>
            </div>
	</div>
</li>

<li class="topmenu"><a href="#"><span>I.T. Support</span></a>
	<div class="submenu">
    		<div class="column">
            	<ul>
				<?php
                $menu1="SELECT * from websitepages where pagetype = 'I.T. Support' order by pagedesc ASC ";
               ...

CSS

ul#css3menu_top,ul#css3menu_top ul {
	margin:0 auto 0 auto;
	list-style:none;
	padding:0;
    width: 300px;
}
ul#css3menu_top,ul#css3menu_top .submenu {

}
ul#css3menu_top .submenu {
	visibility:hidden;
	position:absolute;
	left:0;
	top:100%;
	float:left;
	background-color:#ff0000;
	border-color:#FFF;
	padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
	visibility:visible;
	opacity:1;
}
ul#css3menu_top li {
	position:relative;
	display:block;
	white-space:nowrap;
	font-size:0;
	float:left;
}
ul#css3menu_top li:hover {
	z-index:1;
}
ul#css3menu_top ul .submenu {
	z-index:2;
	position:absolute;
	left:100%;
	top:0;
}
ul#css3menu_top {
	font-size:0;
	width:100%;
	z-index:999;
	position:relative;
	display:inline-block;
	zoom:1;
	padding:0 0%;
	margin:0 0%;
	*display:inline;
}
ul#css3menu_top .column {
	float:left;
}
* html ul#css3menu_top li a{
	display:inline-block;
}
ul#css3menu_top>li {
	margin:0;
	width:14%;
}
ul#css3menu_top li.toplast{
	width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
	outline-style:none;
}
ul#css3menu_top a{
	display:block;
	text-align:center;
	text-decoration:none;
	font:bold 16px Calibri;
	color:#EEEEEE;
	text-shadow:#FFF 0 0 1px;
	cursor:pointer;
	padding:10px 15px 6px 3px;
	background-color:#666666;
	background-repeat:repeat;
	background-position:0 0;
	height:20px;
}
ul#css3menu_top ul li {
	float:none;
	margin:10px 0 0;
}
ul#css3menu_top ul a {
	text-align:left;
	padding:4px;
	background-color:#EEEEEE;
	background-image:none;
	border-width:0;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font:16px Calibri;
	color:#666666;
	text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
	background-color:#EEEEEE;
	color:#666666;
	background-position:0 100px;
	text-decoration:none;
}
ul#css3menu_top img {
	border:none;
	vertical-align:middle;
	margin-right:6px;
}
ul#css3menu_top span {
	display:block;
	overflow:visible;
	background-position:right...