JSFiddle - React, Tailwind, and code Playground

HTML

<section id="admin_header">';
	
</section>
		
<section id="admin_main">
	<!-- Navigation -->
	<nav class="nav">
        <ul id="nav_elements">
		<li class="news">
			<a href="#">News</a>
		</li>
		<li class="comments">
			<a href="#">Kommentare</a>
		</li>
		<li class="events">
			<a href="#"><span>Termine</span></a>
			<ul class="sub">
				<li><a href="#">Erezählcafé</a></li>
				<li><a href="#">Vortrag</a></li>
				<li><a href="#">Ausstellung</a></li>
				<li><a href="#">Vereinstermine</a></li>
				<li><a href="#">Mitgliederversammlung</a></li>
			</ul>
		</li>
		<li class="press">
			<a href="#">Presse</a>
		</li> 
		<li class="media">
			<a href="#">Media</a>
		</li>
		<li class="menu">
			<a href="#"><span>Menü</span></a>
			<ul class="sub">
				<li><a href="#">Oben</a></li>
				<li><a href="#">Unten</a></li>
			</ul>
		</li>
		<li class="contact">
			<a href="#">Kontakt</a>
		</li>
		<li class="users">
			<a href="#">Benutzer</a>
		</li>
		<li class="other">
			<a href="#"><span>Sonstiges</span></a>
			<ul class="sub">
				<li><a href="#">Banner</a></li>
				<li><a href="#">Sponsoren</a></li>
				<li><a href="#">Eco Veranstaltung</a></li>
				<li><a href="#">Forschungsliteratur</a></li>
				<li><a href="#">Keywords &amp; Description</a></li>
				<li><a href="#">SitemapGenerator</a></li>
			</ul>
		</li>
		<li class="statistic">
			<a href="#"><span>Statistik</span></a>
			<ul class="sub">
				<li><a href="#">Besucherzahlen</a></li>
				<li><a href="#">Besucherzahlen Informationen</a></li>
				<li><a href="#">Besucherstatistik</a></li>
				<li><a href="#">Speicherplatz</a></li>
				<li><a href="#">Newsletter</a></li>
				<li><a href="#">Referer</a></li>
			</ul>
		</li>
	</ul>        		
	</nav>

	<!-- Content -->
	<article id="main">
        text
        <p>
        text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br>...

CSS

body { 
	font-family: sans-serif;
	font-size: 12px;
	height: 100%;
}

#admin_header {
	height: 100px;
	background: rgb(33, 33, 33);
	background: -moz-linear-gradient(90deg, rgb(33, 33, 33) 65%, rgb(0, 0, 0) 100%);
	background: -webkit-linear-gradient(90deg, rgb(33, 33, 33) 65%, rgb(0, 0, 0) 100%);
	background: -o-linear-gradient(90deg, rgb(33, 33, 33) 65%, rgb(0, 0, 0) 100%);
	background: -ms-linear-gradient(90deg, rgb(33, 33, 33) 65%, rgb(0, 0, 0) 100%);
	background: linear-gradient(180deg, rgb(33, 33, 33) 65%, rgb(0, 0, 0) 100%);
	-webkit-box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.75);
}

#admin_main {
    position: relative;

}

.nav {
	position: relatve;
        height: 100%;
	width: 160px;
	float: left;
	top: 0;
	left: 0;
	margin: 5px 0 0 0;
	background-color: #f5f4f2;
}

#main {
	position: absolute;
	float: left;
	top: 0;
	right: 0;
	left: 160px;
	margin: 5px 0 0 0;
	padding: 20px;
    height: auto;
	background-color: #f9f9f9;
}

/***********************/
/* Navigation
/***********************/
ul#nav_elements {
	position: relative;
	padding-left: 32px;
	margin: 0;
	font-size: 14px;
}

ul#nav_elements li {
	position: relative;
	display: block;
	margin: 0 0 0 -32px;
	width: 160px;
}

/* Text Navileiste */
ul#nav_elements a {
	display: block;
	padding: 5px 10px 5px 10px;
	color: #000000;
	text-decoration: none;
	vertical-align: middle;
	font-weight: bold;
}

ul#nav_elements li:hover {
	background-color: #bfbfbf;
}

ul#nav_elements li:hover a {
	color: #000000;
}

/* Dropdown Navileiste */
ul#nav_elements ul {
	position: relative;
	display: none;
	padding: 2px 0 2px 32px;
	background-color: #f5f4f2;
	box-shadow:
		inset 0px 10px 10px -10px rgba(0,0,0,0.5),
		inset 0px -10px 10px -12px rgba(0,0,0,0.5);
	}
}

ul#nav_elements ul li {
	float: none;
}

/* Text Dropdown Navileiste */
ul#nav_elements ul a {
	text-align: left;
	font-variant: normal;
	font-size:...

JavaScript

$('#nav_elements').children('li').each(function(){
		$(this).bind('click',function(){
			$(this).find('.sub').slideDown(300);
			
		}).bind('mouseleave',function(){
			$(this).find('.sub').stop().slideUp(300);
		});
	});

$('#main').click(function() {
    $('p').show();

});