JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Page A</li>
  <li>Page B
    <ul>
      <li>Dropdown</li>
      <li>Dropdown</li>
    </ul>
   </li>
</ul>

CSS

li{
  list-style-type:none;
  display: inline-block;
  position: relative;
  padding: 20px;
  background-color: #08c;
}

li ul li{
  min-width:200px;
}

li ul{
  margin:0;
  padding:0;
  position: absolute;
  top: 100%;
  left:0;
  display: none;
}

JavaScript

$(document).ready(function(){
						var timer;

            $('ul> li').hover(function() {
    					clearTimeout(timer);
    					$(this).find('ul').slideDown('fast');
            }, function() {
            		var list = $(this).find('ul');
                timer= setTimeout(function() {
                list.slideUp('fast');
                }, 2000);
            });
        });