JSFiddle - React, Tailwind, and code Playground

HTML

<div class="vUiPm">
  <ul>
    <li role="parent"><span>Telugu ></span>
	  <ul role="child">
	   <li role="parent" ><span>Chiranjeevi ></span>
	      <ul role="child">
	         <li><span>Tagore</span></li>
	         <li><span>Indra</span></li>
	         <li><span>Stalin</span></li>
          </ul>
       </li>
	   <li role="parent"><span>Pawan Kalyan ></span>
	     <ul role="child">
	         <li><span>Kushi</span></li>
	         <li><span>Badri</span></li>
	         <li><span>Gabbar Singh</span></li>
          </ul>	   
	   </li>
	   <li><span>Bala Krishna</span></li>
	   <li><span>Venkatesh</span></li>
	   <li><span>Nagarjuna</span></li>
	  </ul>
	</li>
    <li role="parent"><span>English ></span>
	   <ul role="child">
	    <li><span>Tom Cruise</span></li>
	    <li><span>Leonardo Decopreo</span></li>
	    <li><span>Jason Statohm</span></li>
	    <li><span>Nicolus Cage</span></li>
	   </ul>
    <li role="parent"><span>Hindi ></span>
	    <ul role="child">
		 <li><span>Amitabh</span></li>
		 <li><span>Shahrukh Khan</span></li>
		 <li><span>Amir Khan</span></li>
		 <li><span>Salman Khan</span></li>
		</ul>
	</li>			 
  </ul>
</div>

CSS

.vUiPm{
 display:inline-block;
 position:absolute;
 z-index:9999;
 top:100px;
 left:50px;
}
 .vUiPm ul{
   margin:0px;
   padding:0px;
   border:1px solid red;
   display:inline-block;
   position:absolute;      
 }
 .vUiPm ul li{
   list-style:none;
   padding:2px 5px;
   background:#ffcc66;
   border-bottom:1px solid #ff0099;
   white-space:nowrap;
   cursor:pointer;
 }
 .vUiPm ul li:hover{
  background:#ff99ff;
 }
 .vUiPm ul li span{
   display:inline-block;
   width:100%;
   white-space:nowrap;
 }
 .vUiPm ul[role="child"]{
  display:none;
  z-index:999;
 }

JavaScript

var _pm = new function(){
	this.pm;
	this.parent;
	this.parentUl;
	this.child;
}
$(document).on('mouseover','.vUiPm ul li[role="parent"]',function(){
         _pm.parent = $(this);
		 _pm.parentUl = _pm.parent.closest('ul');
		 _pm.child = _pm.parent.closestChild('ul[role="child"]');
         
		 var left = _pm.parentUl.outerWidth();
		 var top  = _pm.parent.position().top;
		 _pm.child.show().css({left:left-2,top:top-1});
		 $('#test').html('mouse over is called; Left'+left+', top'+top);
});

$(document).on('mouseout','.vUiPm ul li[role="parent"]',function(){
		 _pm.parent = $(this);
		 _pm.child  = _pm.parent.closestChild('ul[role="child"]');
         _pm.child.hide();
		 $('#test').html('mouse out is called');
});
 (function($) {
    $.fn.closestChild = function(filter) {
        var $found = $(),
            $currentSet = this; // Current place
        while($currentSet.length) {
            $found = $currentSet.filter(filter);
            if ($found.length) break;  // At least one match: break loop
            // Get all children of the current set
            $currentSet = $currentSet.children();
        }
        return $found.first(); // Return first match of the collection
    }    
})(jQuery);