JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<!-- Fb/SyntaxSoftware -->
<div id="menuAc">Alt Menü</div>
<div id="menu">
    <uli>
        <li>Anasayfa</li>
        <li>Hakkımızda</li>
        <li>İletişim</li>
    </uli>
</div>

CSS

#menu{
    width: 200px;
    height: 200px;
    background: #ddd;
    display: none;
}
#menu>ul,li{
    list-style: none;
    padding: 0;
}
#menu>ul,li{
    padding: 10px;
    background: #ccc;
    margin-bottom: 2px;
}
#menu>ul,li:hover{
    background: #eee;
}
#menuAc{
    width: 200px;
    height: 30px;
    background: #bbb;
    text-align: center;
    cursor: pointer;
}

JavaScript

$(function () {
    $("#menuAc").click(function(){
    	$("#menu").fadeToggle();
    });
    
    $('*').click(function (e) {
        if (!$(e.target).is('#menuAc') && !$(e.target).is('#menuAc *')) {
            $('#menu')
                .fadeOut();
        }
    });
});