在列表项上悬停时，将div显示一段时间

Question

我有一个类别列表。当列表项悬停时，div（#category-菜单）可见包含一些项目。但我的问题是，当鼠标离开列表项时，div变为不可见。我希望这个div保持可见，直到鼠标离开它或在一段时间内保持可见。

请查看代码和代码段：

$('#category .list-group-item').hover(function(){
	var id = $(this).attr('id');
	$('#category-menu').toggleClass('invisible visible');
	$('#category-menu .row').each(function(){
		var rowid = $(this).attr('id');
		if(rowid == id){
			$('#category-menu .row').hide();
			$(this).toggleClass('invisible visible').show();
		}
	});
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='category' class='container-fluid container-margin mt-sm-2'>
    <div class='row'>
    	<div class='col-sm-3'>
    		<div class="list-group">
    		  <a id='0' href="#" class="list-group-item list-group-item-action">LED TV Monitor</a>
    		  <a id='1' href="#" class="list-group-item list-group-item-action">Sound System</a>
    		  <a id='2' href="#" class="list-group-item list-group-item-action">Projector</a>
    		</div>
    	</div>

         <div class='col-sm-9'>    			
        	<div id='category-menu' class='bg-light invisible' style='z-index:99;position:absolute;width:60vw;min-height:30vw;margin-left:-2.5vw;'>
        		<div id='0' class='row invisible'>
        			<div class='col-sm-4'>
        				<p><b>Dell LED Monitor</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Skyview LED Monitor</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Circle LED Monitor</b></p>
        			</div>    
        		</div>
        		
        		<div id='1' class='row invisible'>
        			<div class='col-sm-4'>
        				<p><b>Home Threatre</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Sound System</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Sound System</b></p>
        			</div>    
        		</div>
        							
        		<div id='2' class='row invisible'>
        			<div class='col-sm-4'>
        				<p><b>Phillips</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Epson</b></p>
        			</div>
        			<div class='col-sm-4'>
        				<p><b>Toshiba</b></p>
        			</div>
        		</div>
        
        	</div>
         </div>
     </div>
</div>

如果您看过该片段，则注意到鼠标移出后#category-menu会立即隐藏。我希望它保持可见，以便用户可以从中选择项目。然后当鼠标离开#category-menu时隐藏。