JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="navigation">
    <ul>
        <li class="first"> <a href="dashboard">Home</a>
        </li>
        <li> <a href="bankrelations">Menu 1</a> 
            <ul class="menu_level_1">
                <li class="first"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/20">Submenu 1</a> 
                </li>
                <li class="last"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/21">Submenu 2</a> 
                </li>
            </ul>
        </li>
        <li> <a href="bankrelations">Menu 2</a> 
            <ul class="menu_level_1">
                <li class="first"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/20">Submenu 1</a> 
                </li>
                <li class="last"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/21">Submenu 2</a> 
                </li>
            </ul>
        </li>
        <li> <a href="bankrelations">Menu 3</a> 
            <ul class="menu_level_1">
                <li class="first"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/20">Submenu 1</a> 
                </li>
                <li class="last"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/21">Submenu 2</a> 
                </li>
            </ul>
        </li>
        <li> <a href="bankrelations">Menu 4</a> 
            <ul class="menu_level_1">
                <li class="first"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/20">Submenu 1</a> 
                </li>
                <li class="last"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/21">Submenu 2</a> 
                </li>
            </ul>
        </li>
        <li> <a href="bankrelations">Menu 5</a> 
            <ul class="menu_level_1">
                <li class="first"> <a href="/symfony/web/app_dev.php/secure/bankrelations/bankrelation/20">Submenu 1</a> 
                </li>
                <li class="last"> <a...

CSS

#navigation{
	width:900px;
	margin:0px 0 13px;
	padding:0px;
	float:left;
	background:#3b6daa;
	}
#navigation>ul {
	margin: 0; padding: 0;
	float: left;
	list-style: none;
	position: relative;
	z-index:1;
	}
#navigation>ul li {
	float: left;
	margin: 0; 
	padding: 0;
	border-right: 1px solid #22518b;
}
#navigation>ul li.last{
	border-right:none;
	}
#navigation>ul li a {
	padding: 10px 18px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
	font-family:'Boton-Regular',Georgia, "Times New Roman", Times, serif;
	font-size:13px;
	color:#fff;
	text-decoration:none;
}
#navigation>ul li:hover { 
	background: #81abdd; 
	}
#navigation>ul li ul {
	float: left;
	padding: 8px 0;
	position: absolute;
	left:auto; 
	top:42px;
	display: none;
	width:562px;
	background: #81abdd;
	color: #1c508e;
	list-style: none;
}
#navigation>ul li:hover ul { 
	display: block;
	
	 }
#navigation>ul li ul a { 
	display: inline;
	color: #1c508e; 
	}
#navigation>ul li ul a:hover {
	text-decoration:none;
	color:#fff;
	}