JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuItems" data-bind="foreach: dataRows">
	<div class="module-box">
		<span data-bind="if: isUserItem" class="dropdown-arrow"></span>
		<a data-bind="attr: { target: newWindow() ? '_blank' : '', href: url }" target="_blank" href="/media/technologyexplained/active_passive_safety/carnet/index.html">
			<img data-bind="attr: { src: imagePath, alt: url }" alt="/media/technologyexplained/active_passive_safety/carnet/index.html" src="http://www.vwwebsource.com//Portals/0/Images/Academy/car-net_mini-banner.jpg">
		</a>
	</div>
	
	<div class="module-box">
		<span data-bind="if: isUserItem" class="dropdown-arrow"></span>
		<a data-bind="attr: { target: newWindow() ? '_blank' : '', href: url }" target="" href="http://vwdnn.local/Community/DealerCareers/FindAnApplicant.aspx">
			<img data-bind="attr: { src: imagePath, alt: url }" alt="http://vwdnn.local/Community/DealerCareers/FindAnApplicant.aspx" src="http://www.vwwebsource.com//Portals/0/Images/Academy/DealerCareers.jpg">
		</a>
	</div>
	
	<div class="module-box">
		<span data-bind="if: isUserItem" class="dropdown-arrow"></span>
		<a data-bind="attr: { target: newWindow() ? '_blank' : '', href: url }" target="" href="http://vwdnn.local/Academy/AfterSales/ServiceXpress.aspx">
			<img data-bind="attr: { src: imagePath, alt: url }" alt="http://vwdnn.local/Academy/AfterSales/ServiceXpress.aspx" src="http://www.vwwebsource.com//Portals/0/Images/Academy/ServiceXpress.jpg">
		</a>
	</div>
	
	<div class="module-box">
		<span data-bind="if: isUserItem" class="dropdown-arrow"></span>
		<a data-bind="attr: { target: newWindow() ? '_blank' : '', href: url }" target="_blank" href="http://vwdnn.local/Community/MaxWeb.aspx">
			<img data-bind="attr: { src: imagePath, alt: url }" alt="http://vwdnn.local/Community/MaxWeb.aspx" src="http://www.vwwebsource.com//Portals/0/Images/Academy/Special-Broadcasts/Aug-Executive.jpg">
		</a>
	</div>
	
	<div class="module-box">
		<span data-bind="if: isUserItem" class="dropdown-arrow">arrow...

CSS

#menuItems {
    width: 595px;
}

.module-box {
    height:125px;
    width:180px;
    float:left;
    margin:3px;
    position: relative;
    /* The important part */
}
.dropdown-arrow {
    position: absolute;
    /* This makes the X positioned absolutely to it's nearest relative parent */
    top:2px;
    /* Adjusting from the top */
    right:2px;
    /* Adjusting from the right */
}

#menu{
    display: none;
    width: 200px;
    background-color: yellow; 
    position: absolute;
}

JavaScript

$(document).ready(function() {   
    
    $(document).on('mouseover', '.dropdown-arrow', function(){
        var pos = $(this).parent().position();
        var h = $(this).outerHeight();
        $('#menu').css('top',pos.top + h + 'px');
        $('#menu').css('left',pos.left + 'px');
        $('#menu').show();
        $('#menu').focus();
        $(this).mouseleave(function(){
            if(!$('#menu').is(":hover"))            
                $('#menu').hide();
        });
    });   
    
    $('#menu').mouseleave(function(){
        $('#menu').hide();
    });
    

    
    
});