JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
                    <section>
                        <a href="index.html"><img src="img/logo.png" alt=""></a>
                        <ul class="clearfix">
                            <li class="selected"><a href="index.php">Home</a></li>
                            <li><a href="#">Projekty</a>
								<ul class="sub-menu">
                                    <li><a href="#">AAAAAA</a>
									  <ul class="sub-menu-b">
                                          <li><a href="schulisches_projekte_dpsp.php">BBBBBB</a></li>
                                          <li><a href="schulisches_projekte_andere.php">BBBBBB</a></li>
										  	   <ul class="sub-menu-c">
													<li><a href="schulisches_projekte_dpsp_allgemeines.php">CCCCCC</a></li>
													<li><a href="schulisches_projekte_dpsp_begegnungen.php">CCCCCC</a></li>
											   </ul>
                                          <li><a href="schulisches_projekte_wettbewerbe.php">BBBBBB</a></li>
                                      </ul>
									 </li>
									</ul>
								</li>
                            <li><a href="kontakt.php">Kontakt</a></li>
                        </ul>
                    </section>
                </div>

CSS

/*-----------------------------------------
    	Menu 
 -------------------------------------------*/

#menu {
	width:50%;
	position:absolute;
	z-index:99999;
}
#menu section {
	margin:auto;
	width:500px;
	background-color:#ffffff;
	z-index:10;
	position:relative;
	height:7px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
#menu img {
	margin:8px 0px 10px 16px;
}
#menu section > ul {
	float:right;
	margin-right:55px;
	padding-top:22px;
}
#menu li {
	display:inline-block;
	margin-right:20px;
	position:relative;
	height:50px;
}
#menu li > a {
	text-transform:uppercase;
	font-size:12px;
	padding-top:25px;
	color:#6f6b6b;
	font-weight:400;
}
#menu a:hover {
	color:#76c1f7;
}
#menu li.selected a {
	border-top:2px solid #76c1f7;
}

/*-----------------------------------------
    	Sub-Menu 
 -------------------------------------------*/

#menu .sub-menu {
	position:absolute;
	left:0;
	top:50px;
	border-left:3px solid #6CA7D3;
	display:none;
}
#menu .sub-menu li {
	width:200px;
	border-top:1px solid #DFDFDF;
	background:#EFF1F3;
	margin:0;
	height:auto;	
	float:left;
}
#menu .sub-menu a {
	padding:12px 15px;
	margin:0;
	font-size:11px;
	color:#6E6C6C;
	height:38px;
	display:block;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
#menu li.selected .sub-menu a {
	border:none;
}
.no-js #menu li:hover .sub-menu {
	display:none;
}
#menu .sub-menu a:hover {
	color:#6CA7D3;
}
/*-----------------------------------------
    	Sub-Menu-B 
 -------------------------------------------*/
 #menu .sub-menu-b {
	position:absolute;
	left:100%;
	top:-1px;
	border-left:3px solid #6CA7D3;
	display:none;
}
#menu .sub-menu-b li {
	width:200px;
	border-top:1px solid #DFDFDF;
	background:#EFF1F3;
	margin:0;
	height:auto;	
	float:left;
}
#menu .sub-menu-b a {
	padding:12px...

JavaScript

var txopen = false;
$('#menu').find('ul.clearfix').children('li').hover(function(){
      $(this).find('ul.sub-menu').stop().slideDown(150);
      $(this).find('ul.sub-menu').children('li').hover(function(){
          if (!txopen) {
              $(this).find('ul.sub-menu-b').stop().animate({widht: 'toggle'},150);
              txopen = true;
              $(this).find('ul.sub-menu-c').stop().animate({widht: 'toggle'},150);
              txopen = true;
          }
      }, function() {
          if (txopen) {
              $(this).find('ul.sub-menu-b').stop().animate({width: 'toggle'},100);
              txopen = false;
              $(this).find('ul.sub-menu-c').stop().animate({width: 'toggle'},100);
              txopen = false;
          }
      });
   }, function(){
      if (txopen) {
           $(this).find('ul.sub-menu-c').stop().animate({width: 'toggle'},100);
          $(this).find('ul.sub-menu-b').stop().animate({width: 'toggle'},100);
      }
      $(this).find('ul.sub-menu').stop().slideUp(100);
   });