JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.minified.js"></script>
<br/>
        <table border="1" width="400">
            <tr>
                <th>
                    Header 1
                </th>
                <th>
                    Header 2
                </th>
            </tr>
            <tr>
                <td>
                    <a class="show_div" href="#">Drink</a>
                    <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
                        <ul>
                            <li>
                                Coffee
                            </li>
                            <li>
                                Tea
                            </li>
                            <li>
                                Milk
                            </li>
                        </ul>
                    </div>
                </td>
                <td>
                    <a class="show_div" href="#">Friuts</a>
                    <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
                        <ul>
                            <li>
                                Banana
                            </li>
                            <li>
                                Water Melon
                            </li>
                            <li>
                                Lychee
                            </li>
                        </ul>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <a class="show_div" href="#">Movies</a>
                    <div class="hello" style="display:none;z-index:999;position: absolute;background-color:#99CC67;">
                        <ul>
                            <li>
                                Avatar
                            </li>
                            <li>
                ...

JavaScript

$(document).ready(function() {
     $("a.show_div").hoverIntent({ // capture the link hover events
         over:  function() {
                 var $sibling = $(this).siblings('div.hello').show(); // get the sibling div and show it
                 $('div.hello').not($sibling).fadeOut(300); // hide the other divs
                 $sibling.data('linkOver', true); // store the fact that the link triggered this
                },
         out: function() {   
                var $sibling = $(this).siblings('div.hello');
                $sibling.data('linkOver', false);
                if( $sibling.data('divOver') != true) { // only hide if the mouse isn't on the div
                  $sibling.delay(200).fadeOut(500); // get the sibling div and hide it after .333 seconds
                }
              },
        timeout: 500   //time to fire the event - must be greater than div.hover's timeout                  
      });
     
     $("div.hello").hoverIntent({ //capture the div hover events
         over: function() {
                 $(this).data('divOver', true); // store the fact we're over the div now
               },
         out:  function() {   
                 var $div = $(this);
                 $div.data('divOver', false);
                 if( $div.data('linkOver') != true ) { // if we're not on the link
                   $(this).delay(200).fadeOut(500);  // then hide the div
                 }
               },
         timeout: 400
       });    
     });