JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

	
    <title> Intranet</title>
	
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="language" content="de" />
	
	 <!-- CSS -->
	
    <link rel="stylesheet" type="text/css" href="style.css" />
	<link href="css/bootstrap.min.css" rel="stylesheet">
	
	 <!-- Script -->
	 
	
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
	<script src="js/bootstrap.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<!-- Linke-Navigation -->
	
	<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>

</head>


	<!-- Body -->
<body>


<div class="container">

<div id="wrapper">

	<!-- Header -->

<div id="header">
<header>
   <img src="logo.png" alt="Logo">
</header>
</div>
  
	<!-- Toplevel-Navigation -->
	  
      <div id="top_nav">
        <ul id="navigation_ul">
			<li id="navigation_li"><a class="active" href="#home">Home</a></li>
			<li id="navigation_li"><a href="#news">News</a></li>
			<li id="navigation_li"><a href="#contact">Contact</a></li>
			<li id="navigation_li"><a href="#about">About</a></li>
		</ul>
      </div>
	 
	<!-- Linke Navigation -->
	  
      <div id="left">
	  
	<!-- Home -->
	  <p></p>
	  
	  <div id="home"> Home/Dokumente </div>
	  <p></p>
	  
	<!-- Linke Navigation -->
	<div id="Navigation_Links">
	
	  <ul id="nav">
	    <li class="expand"> <div id="ordner">...

CSS

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

	#nav {
		
		padding-left:5px;
		padding-top: 15px;
		
		color:black;
		font: 12px Verdana,Arial;
        clear:both;
    }
	
	#ordner {
		
		padding:10px;
		display:block;
		margin-right:-10px;
		overflow:hidden;
		margin-top:-5px;
		margin-bottom:-5px;
		margin-left:-20px;
	}
	
	#ordner:hover {
		
		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;
		background: url(img/dots.png) repeat-y scroll 10px 0px transparent; 
		
		margin-top:5px;
 	
	}
		
	
	#nav  li.expand {
		background: url(img/folder.png) no-repeat scroll 0px 6px 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 7px 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>