JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <ul>
	    <li><a href="#">Home</a></li>
	    <li>
	        <a href="#">Aktuelles</a>
                <ul>
	            <li><a href="#">News</a></li>
	            <li><a href="#">Veranstaltungen</a></li>
	            <li><a href="#">Newsarchiv</a></li>
                </ul>
            </li>
	    <li>
	        <a href="#">MenĂĽpunkt 3</a>
                <ul>
	            <li><a href="#">Unterpunkt 1</a></li>
	            <li><a href="#">Unterpunkt 2</a></li>
	            <li><a href="#">Unterpunkt 3</a></li>
	            <li><a href="#">Unterpunkt 4</a></li>
	            <li><a href="#">Unterpunkt 5</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

#nav {font-family:Helvetica,sans;}
#nav ul{ list-style-type:none; margin:0; padding:0; }
#nav li { float:left; padding:0; margin:0;}
#nav li a { width:150px; display:block; text-align:center; color:#000; margin-right:5px; height:35px; line-height:35px; text-decoration:none; font-size:80%; border:1px solid #ccc; }
#nav li a:hover { color:#f00; }
#nav ul ul { display:none; position:absolute; z-index:999; }
#nav li li { float:none; }
#nav li li a { background:#EBE7E6!important; text-align:left; height:auto; line-height:1; width:auto; padding:8px 20px 8px 22px; border:1px solid #D0D0D0; border-top:none; margin-right:0; }
* html li li { display:inline; } /* IE6 Bugfix... */

JavaScript

$(document).ready(function() {
	$("#nav li:has(ul)").hover(function(){
		$(this).find("ul").slideDown('fast');
	}, function(){
		$(this).find("ul").hide();
	});
});