JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:100%;height:auto;background:#aa0;border:2px solid #770;z-index:10;">
	<div class="ddown">
	<a class="ddownHead" href="#!" Onclick="toggle_expand_ddown(this);">Click to Expand</a>
	<div style="z-index:6;">
		<a href="#!">Item 1</a>
		<a href="#!">Item 1</a>
		<a href="#!">Item 1</a>
		<a href="#!">Item 1</a>
	</div>
	</div>
 	This is Another Child in same Parent
</div>
<div style="background:#eee;color:#555;width:100%;height:200px;display:inline-block;z-index:2;box-shadow:10px 10px 10px 2px rgba(0,0,0,0.8);border:2px solid #555;border-radius:12px;text-align:center;margin:5px;">Heya</div>

CSS

.ddown{
		width:250px;
		background: #aaa;
		border: 2px solid #777;
		color: #444;
		text-align: center;
		margin: 0px;
		display: inline-block;
    z-index:5;
    float:left;
    overflow:visible;
    position: absolute;
	}
	.ddown a{
		width: 100%;
		height: 25px;
		text-align: left;
		color: #666;
		text-decoration: none;
		background: #ddd;
		border: 1px solid #999;
    z-index:5;
    display:none;
    
	}
	.ddownHead{
		display: inline-block !important;
	}
	.ddownItem{
		display: inline-block !important;
        z-index:5;!important
	}
	.ddownItem:hover{
		background: #33a;
		color: #fff;
	}
	.ddown_busy{
		background: #77a !important;
		border: 1px solid #558 !important;
		color: #fff !important;
	}

JavaScript

function toggle_expand_ddown(x){
		if($(x).closest("div").find("a").eq(0).hasClass("ddown_busy")){
			$(x).closest("div").find("a").eq(0).removeClass("ddown_busy");
		$(x).closest("div").find("div").each(function(){
			$(this).find("a").each(function(){
				$(this).removeClass("ddownItem");
			});
		});
		}
		else
		{
		$(x).closest("div").find("a").eq(0).addClass("ddown_busy");
		$(x).closest("div").find("div").each(function(){
			$(this).find("a").each(function(){
				$(this).addClass("ddownItem");
			});
		});
		}
	}