JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Linke Navigation -->
	
	  
 <div id="left">
	  
	  
	<!-- Linke Navigation -->
	<div id="Navigation_Links">
	
	  <ul id="nav">
	    <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; &Uumlber das IQB </div>
			<ul>
				<li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">&#xbb; Einbauerklaerung_2006-42-EG_Muster</a></li>
				<li><a href="PDF/a.pdf" class="embed-link"> &#xbb; Einbauerklaerung_2006-42-EG_Muster </a></li>
				<li>Partner/Links</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Bildungsstandards  </div>
			<ul>
				<li>Aufgabenbeispiele</li>
				<li>EMSE</li>
			     <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Downloadserver </div>
					<ul>
						<li>Audiofiles</li>
						<li>Videofiles</li>
					</ul>
				</li>
			</ul>
		</li>
		
		 <li class="expand"> <div class="ordner"> &nbsp;&nbsp;&nbsp;&nbsp; Arbeitsbereiche</li> </div>
			
	</ul>

CSS

/*Linke Navigation -----------------------------------*/

	#nav {
		
		padding-left:5px;
		padding-top: 10px;
		
		color:black;
		font: 12px Verdana,Arial;
        clear:both;
    }
	
	.ordner,.ordnerOffen{
		
		padding:8px;
		display:block;
		margin-right:-10px;
		margin-top:-5px;
		margin-bottom:-5px;
		margin-left:-20px;
		overflow:hidden;
		
	}
	
	.ordnerOffen {
		cursor:pointer;
		color:white;
    background-color:#333;
		
	}
	
	/*li:hover  .ordner {
	
		cursor:pointer;
		color:white;
		background-color:#333;
		
	}*/
	
	a {
		text-decoration:none;
		color: black;
		padding: 5px 5px 5px 15px;
		display: block;
	}

	ul, li {
		list-style: none;		
	}

	#nav li {
		/*padding: 2px 2px 2px 15px;*/
		cursor: default;
		margin-right:-10px;
		overflow:hidden;
		/*border-top:1px solid black;*/
	   
    }
		

	#nav ul {
		display: none;
		margin-top:5px;
		background: url(img/dots.png) repeat-y scroll 10px 0px transparent; 
		
	}
		
	  #nav .showSubnav {
  display: block !important;
}
	
	#nav  li.expand {
		background: url(img/folder.png) no-repeat scroll 2px 4px transparent;	
		border-bottom: 1px solid #000;
		padding: 5px 5px 5px 16px;
		/*border-top:1px solid black;*/
		
		
	}

	.expanded {
		background: url(img/folder.open.png) no-repeat scroll 0px 5px transparent !important; 
		border-bottom: 1px solid #000;
		
	
	}

	#nav li a:hover {
    text-decoration: none;
    color: #F6F1F1;
	border-width:1px;	
    border-style:solid;
	border-left: black;
	
    }
	
	
	#nav ul a:hover {
    text-decoration: none;
    color: #000000;
    background-color: white;
	
	}

JavaScript

<script type="text/javascript">

	$(document).ready(function() {
		$("#nav").on('click', 'li.expand', function(e) {
			$(this).toggleClass("expanded");
			$(this).children("ul:first").slideToggle("300");
			e.stopPropagation();
		});	
		$("#nav").on('click', 'li.expanded a', function(e) {
			e.stopPropagation();
		});
	}); //$(document).ready
	
	</script>
  
<script type="text/javascript">
$("#nav li:has(ul)").children("ul").hide();
$("#nav li:has(ul)").find("div").click(function() {   
   var parent = $(this).parent()
   parent.siblings().find("ul.showSubnav").removeClass("showSubnav");
  
   parent.find("div:first").toggleClass("ordnerO parent.find("ul:first").toggleClass("showSubnav");
   parent.siblings().find("div.ordnerOffen").removeClass("ordnerOffen");ffen");
 });
	</script>