JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
                    <li><a href="#">ANASAYFA</a></li>
                    <li><a href="#">HAKKIMIZDA</a></li>
                    <li>
                        <a href="#">MARKALARIMIZ</a>
                                <div id="submenu_area">
                                      <div><a href="#">İNŞAAT MALZEMELERİ</a></div><br />
                                      <div><a href="#">SERAMİK</a></div><br />
                                      <div><a href="#">ALÇI</a></div><br />
                                      <div><a href="#">HAZIR BETON</a></div><br />
                                      <div><a href="#">ASMOLEN</a></div><br />
                                      <div><a href="#">DÖRT D YAPI</a></div><br />
                                      <div><a href="#">LUFIAN GİYİM</a></div><br />
                                </div>
                    </li>
                    <li><a href="#">BAYİLİKLERİMİZ</a></li>
                </ul>

CSS

#menu {margin:0; padding:0; float:left;}
#menu > li{position: relative;float:left; list-style-type:none; padding-right:40px;}
#menu > li > a{padding-bottom:20px;}
#menu > li a{color:#666; text-decoration:none; display: block;}
#menu > li > div {display: none;}

#submenu_area { width:259px; height:197px; background:url(../images/submenu-bg.png); position: absolute; z-index:99; top:30px; padding:20px;}

JavaScript

$(function(){
    var piFade;
    $('#menu > li').hover(
      function(){
        $('#menu > li:hover > div').fadeIn('slow');
      },
      function(){
        $('#menu > li > div').delay(2500).fadeOut('slow');
      }
    );
});