JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navi">
    <li class="home"><b></b></li>
<ul id="menu">
    <li>One<img src="http://santerh.it/bilder/pfeildropdown2.png" width="10" height="7" alt="öffnen" style="padding-left:10px"></img></li>
    <li>One</li>
    <li>Two<img src="http://santerh.it/bilder/pfeildropdown2.png" width="10" height="7" alt="öffnen" style="padding-left:10px"></img></li>
    <li>Three<img src="http://santerh.it/bilder/pfeildropdown2.png" width="10" height="7" alt="öffnen" style="padding-left:10px"></img></li>
    <li>Four</li>
</ul>
<div class="submenu">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
    <div class="submenu">
        </div>
<div class="submenu">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> 
</div>
<div class="submenu">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
</div>

CSS

*{
    margin:0;
    padding:0;
    text-decoration:none;
}

#navi{
    width:956px;
    height:40px;
    text-decoration:none;
    float:none;
    outline:0;	
    
    background: rgb(55,56,58); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -moz-linear-gradient(top,  rgba(55,56,58,1) 0%, rgba(16,16,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(55,56,58,1)), color-stop(100%,rgba(16,16,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(55,56,58,1) 0%,rgba(16,16,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(55,56,58,1) 0%,rgba(16,16,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(55,56,58,1) 0%,rgba(16,16,16,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(55,56,58,1) 0%,rgba(16,16,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37383a', endColorstr='#101010',GradientType=0 ); /* IE6-8 */
       -moz-border-radius:0px 5px 5px 0px; /* Firefox */
 -webkit-border-radius:0px 5px 5px 0px; /* Chrome,	 Safari */
 -khtml-border-radius:0px 5px 5px 0px; /* Konqueror */
 border-radius:0px 5px 5px 0px;
}

#menu{
    
    
}
li{
    list-style:none;
}

#navi a{
    display:block;
	position:relative;
	text-decoration:none;
    font-family: calibri;
	font-size:16px;
}

#menu li{
    color:#fff;
    font-family: calibri;
	font-size:16px;
    height:41px;
    z-index:990;
    display: block;
	position: relative;
    text-decoration:none;
    
    line-height: 38px;
    padding-left:20px;
    padding-right:20px;
    
    float:left;
    cursor:pointer;
    transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -moz-transition:all 0.4s;
    -ms-transition:all 0.4s;
    -o-transition:all 0.4s;
}

li:hover{
    visibility:		inherit;
    color:#FFF;
    
    background: rgb(162,210,12); /* Old browsers */
/* IE9 SVG, needs...

JavaScript

$('#menu li').hover(function(){
    var i=$(this).index();
    var submenu=$('.submenu').eq(i);
    submenu.css({
        left:$(this).offset().left+'px',
        top:($(this).offset().top+$(this).outerHeight())+'px'
    }).stop().fadeIn(400);
},function(){
    var i=$(this).index();
    var submenu=$('.submenu').eq(i);
    submenu.stop().fadeOut(200);
});
$('.submenu').hover(function(){
    $(this).stop().show();
},function(){
    $(this).fadeOut(200);
});