JSFiddle - React, Tailwind, and code Playground

by Noir Noir

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<a href="#" class="menu-item">Пункт меню с выпадалкой</a>
<div class="undermenu">
  <a href="#" class="undermenu-item">Подпункт 1</a>
  <a href="#" class="undermenu-item">Подпункт 2</a>
  <a href="#" class="undermenu-item">Подпункт 3</a>
</div>

CSS

.undermenu {
  display: none;
}
.undermenu.show {
  display: block;
}
a.menu-item {
  display: inline-block;
  margin-bottom: 50px
}

JavaScript

$(document).ready(function(){
	var timeout;
	$(document).on('mouseover', '.menu-item, .undermenu', function(){
  	clearTimeout(timeout);
  	$('.undermenu').addClass('show');
  });
  $(document).on('mouseleave', '.menu-item, .undermenu', function(){
  	timeout = setTimeout(function(){
    	$('.undermenu').removeClass('show');
    }, 500);
  });
});