JSFiddle - React, Tailwind, and code Playground

HTML

<nav
	style="text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; height: 37px; max-width: 1500px;">
	<ul id="css3menu1" class="topmenu">
		<li class="switch"><label onclick="" for="css3menu-switcher"></label></li>
		<li class='topfirst'><a href='#'
			style='height: 15px; line-height: 15px;'><span>1. Menüpunkt</span></a>
			<ul>
				<li class='subfirst'><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
			</ul></li>
		<li class='topmenu'><a href='#'
			style='height: 15px; line-height: 15px;'><span>2. Menüpunkt</span></a>
			<ul class='unterteilen'>
				<li class='subfirst'><a
					href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a
					href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a
					href='#'
					style='height: 15px; line-height: 15px;'><span>Menüpunkt</span></a></li>
				<li><a
					href='#'
					style='height: 15px; line-height:...

CSS

body {
  background-color: #9C9B97;
}
ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;padding:0;background-color:transparent;border-width:0px;border-style:solid;border-color:#999999;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;background-color:#ffffff;border-width:3px;border-style:solid;border-color:#d8d9da;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li{
	position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
	z-index:1;}
ul#css3menu1{
	font-size:0;position:relative;display:inline-block;padding:1px 1px 1px 0;
	*display:inline;border:5px solid black;}
* html ul#css3menu1 li a{
	display:inline-block;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}
ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold 12px Arial;color:#ffffff;cursor:default;padding:10px;background-color:transparent;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
	float:none;}
ul#css3menu1 ul a{
	text-align:left;padding:8px 6px 8px 6px;background-color:#ffffff;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#808080;text-decoration:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
	background-color:#004E9E;border-style:none;color:#ffffff;cursor:pointer;}
ul#css3menu1 span{
	display:block;overflow:visible;padding-right:0px;}
ul#css3menu1 > li.switch{
	display:none;cursor:pointer;width:25px;height:20px;}
ul#css3menu1 > li.switch:before{
	content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#ffffff;}
ul#css3menu1 > li.switch:hover:before{
	background:#ffffff;}
.c3m-switch-input{
	display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{
	background-color:#004E9E;border-style:none;color:#ffffff;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li >...