JSFiddle - React, Tailwind, and code Playground

HTML

<div id="naviWrap">
              <div id="naviWrap">
                                <ul id="topNavigation">
                                    <li class="current">
                                        <a href="/">Home</a></li><li><a class="navigation" href="/te-koop.aspx"><span>Te Koop</span></a><ul><li><a class="temp" href="#">Appartementen</a></li><li><a class="temp" href="#">Garages</a></li><li><a class="temp" href="#">Handelspanden</a></li><li><a class="temp" href="#">Villa's</a></li><li><a class="temp" href="#">Woningen</a></li></ul></li><li><a class="navigation" href="/te-huur.aspx"><span>Te Huur</span></a><ul><li><a class="temp" href="#">Appartementen</a></li><li><a class="temp" href="#">Handelspanden</a></li><li><a class="temp" href="#">Kantoor</a></li><li><a class="temp" href="#">Woningen</a></li></ul></li><li><a class="navigation" href="/verhuurdverkocht.aspx"><span>Verhuurd/Verkocht</span></a></li><li><a class="navigation" href="/zoek.aspx"><span>Zoek</span></a></li></ul>

                            </div>

            </div>

CSS

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file    dropdown.css
 * @package    Dropdown
 * @version    0.7.1
 * @type    Transitional
 * @stacks    597-599
 * @browsers  Windows: IE6+, Opera7+, Firefox1+
 *        Mac OS: Safari2+, Firefox2+
 *
 * @link    http://www.lwis.net/
 * @copyright  2006-2008 Live Web Institute. All Rights Reserved.
 *
 */

#naviWrap 
{ 
background-color:#000; 
background-color:rgba(0,0,0,0.5); 
margin:15px 0 0 0; 
}
#topNavigation 
{ 
border-left:1px solid rgba(255,255,255,0.25); 
margin:0 auto; 
width:960px; 
}
#topNavigation ul
{ 
margin: 0;
padding: 0;
list-style: none;

}
#topNavigation li 
{ 
position: relative;
border-left:1px solid rgba(0,0,0,0.25); 
border-right:1px solid rgba(255,255,225,0.25); 
display:inline-block; 
height:60px; 
line-height:60px; 
text-align:center; 
}
#topNavigation li a /*tekst in list items uit het hoofdmenu */
{ 
color:#fff; 
display:block; 
font-size:11px;
height:60px; 
padding:0 30px; 
text-decoration:none; 
text-transform:uppercase; 
font-style: italic; 
font-weight:bold;
}
#topNavigation li a:hover  /*De list item tekst waar er over gehovered wordt*/
{ 
background-color:#000; 
background-color:rgba(0,0,0,0.2); 

text-decoration:underline; 
}

#topNavigation li.current 
{ 
background-color:#000; 
background-color:rgba(0,0,0,0.5); 
}
#topNavigation li:hover ul li
{
display: block;

} 

#topNavigation li ul li:hover
{

background-color:rgba(0,0,0,0.8); 
display:block;
} 

#topNavigation li li /*de list items uit de sub menus*/
{
border-style: none;
position: absolute;
display: none;
float: auto;
background-color:rgba(0,0,0,0.8); 

}

#topNavigation li ul
{
    position: absolute;
    left: 0px;
    top: 60px;
    display: inline-block;
}
#topNavigation ul li
{

 position: relative;

 }
 #topNavigation ul ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
#topNavigation li ul:hover li
{
display:block;
}


/* EDITOR PROPERTIES -...