JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslar</a>
<ul class="altKat">
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">HTML - CSS</a></li>
<li><a href="#">Wordpress</a></li>
</ul>
</li>
<li><a href="#">Reklam Alanları</a>
<ul class="altKat">
<li><a href="#">125x125</a></li>
<li><a href="#">468x60</a></li>
<li><a href="#">720x90</a></li>
<li><a href="#">Tanıtım Yazısı</a></li>
</ul>
</li>
<li><a href="#">İletişim</a></li>
</ul>
CSS
body {margin: auto; padding: 0; font: 12px Arial;}
ul, li{list-style: none;}
a {text-decoration: none;}
.menu {margin: 30px auto; width: 500px; height: 40px; background-color: #333;}
.menu li{padding: 12px 15px; float: left; position: relative;}
.menu li a{color: #f2f2f2;}
.menu li.aktif, .menu li:hover{background-color: #333;}
.menu li.aktif a, .menu li:hover a{color: #fff;}
.altKat {display: none; position: absolute; top: 40px; left: 0; background-color: #333; overflow: hidden;}
.altKat li {display: block; padding: 10px; width: 150px;}
.altKat li a{color: #fff;}
JavaScript
$(function(){
$(".menu li").hover(function(){ //Menü içerisindeki "li"nin üzerine gelindiğinde işlem başlat
$(this).addClass("aktif"); // üzerine gelinen "li"ye aktif sınıfını ata
$(".altKat", this).fadeIn(); // üzerinde bulunduğumuz nesneye ait alt kategori var ise bunu "fadeIn" methodu ile göster
},function(){ // eğer mouse'u üzerine geldiğimiz nesnenin üzerinden çekersek
$(".altKat", this).fadeOut(); // o nesneye ait alt kategorileri gizle
$(".menu li").removeClass("aktif"); // ve o nesnedeki "aktif" sınıfını sil
});
});