Nested DOM Element Context Menus

When nested DOM elements have separate context menus. Activating the inner menu also activates the outer menu

HTML

<!-- Create an area to contain our editable components -->
<div class="container" id="container">

    <!-- Add a child which will have a context menu -->
    <div class="outer-child" id="outer-child">
        Outer Child

        <!-- inner child with its own context menu -->
        <div class="inner-child" id="inner-child">
            Inner Child
        </div>
    </div>
</div>

<ul class="contextMenu" hidden>
            <li id="history"><a href="#"><i class="fas fa-history"></i> Tarihçe</a></li>
            <li><input type="number" id="historyLimit" placeholder="Limit" min="1" max="20"/> </li>
        </ul>

CSS

.outer-child {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background: green;
        }
        .inner-child {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: yellow;
        }

ul.contextMenu{
    list-style:none;
    margin:0;padding:0;
    position: absolute;
    color: #333;
    font-size: 12px;
    background-color: #FF9900;
}

ul.contextMenu *{
    transition:color .4s, background .4s;
}

ul.contextMenu li{
    min-width:80px;
    max-width:120px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 9px;
    background-color: #ff9900;
}

ul.contextMenu li a{
    color:#333;
    text-decoration:none;
}

ul.contextMenu li input{
    width:100px;
    border: 1px solid #fff;
}

ul.contextMenu li input:focus {
    outline: none !important;
    border: 1px solid #fff;

}

ul.contextMenu li:hover{
    background-color: #ffffff;
    border: 1px solid #FF9900;
}

JavaScript

$(document).click(function() {
    var isHovered = $("ul.contextMenu").is(":hover");
    if (isHovered === false){
        $("ul.contextMenu").fadeOut("fast");
    }
});    
    // create context menu on outer child
    $(document).on('contextmenu', '.outer-child', function(event){
      event.stopPropagation();
      event.preventDefault();
      console.log("Akif");
    	$("ul.contextMenu")
        .show()
        .css({top: event.pageY + 12, left: event.pageX + 8, zIndex:1});
    });
    
    $(document).on('contextmenu', '.inner-child', function(event){
      event.preventDefault();
      event.stopPropagation();
      console.log("Mehmet");
    	$("ul.contextMenu")
        .show()
        .css({top: event.pageY + 12, left: event.pageX + 8, zIndex:1});
    });