greenzlat,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hovered{
border: 2px solid red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
let timer;
$('.show_catalog, #subcatalog').on('mouseenter mouseleave', ({type}) => {
if (type == 'mouseenter') {
clearTimeout(timer);
$("#subcatalog").addClass("hovered");
} else timer = setTimeout(() => $("#subcatalog").removeClass("hovered"), 300)
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="show_catalog">Показать каталог</li>
<li>Пункт2</li>
<li>Пункт3</li>
<li>Пункт4</li>
<li>Пункт5</li>
</ul>
<div id="subcatalog">
тут сам каталог....
</div>
</body>
</html>