JSFiddle - React, Tailwind, and code Playground

HTML

<div class="itemsList">
    	<div class="item">ITEM ONE</div>
        <div class="item">ITEM TWO</div>
        <div class="item">ITEM TREE</div>
        <div class="item">ITEM FOUR</div>
    </div>
    
    <div class="storeList" style="display: none;">
       <ul>
           <li>store 1</li>
           <li>store 2</li>
           <li>store 3</li>
       </ul>
    </div>

CSS

.itemsList{
	overflow:hidden;
	width:450px;
	margin: 12% auto 0;
}

.item{
	padding:5px 10px;
	background-color:#FC0;
	color:#333;
	margin:5px 0;
	cursor:pointer;
}
.storeList{
	background-color:#06C;
    font-size: 1em;
    left: 100%;
    padding-left: 15px;
    position: absolute;
    top: 0;
    z-index: 400;
}

JavaScript

$(document).ready( function(){
	$(document).on({
			mouseenter: function () {
				
				if( $('.storeList').css('display') == "none" )
				{
					var offset = $(this).offset();
					var left = offset.left;
					var top = offset.top ;
					
					var bg =  $(this);
					var offsetBg = bg.offset();
					var topBg = offsetBg.top ;
					
					var btn_wtd = $(this).outerWidth();
					
					$('.storeList').css({'left': (left + btn_wtd) , 'top': top });
					$('.storeList').show();
				}
			},
			mouseleave: function () {
				setTimeout( function(){
					if( $(".storeList").is(':hover') )
					{ 
	
					}
					else
					{ 
						$('.storeList').hide();
					}
				}, 100)
			}
		},".storeList, .item");
});