JSFiddle - React, Tailwind, and code Playground

HTML

<span class="a" id=a1>Menu 1 | </span >
<span class="a" id=a2>Menu 2 | </span >
<span class="a" id=a3>Menu 3 </span >

<div id="dropdown"  style="display:none; color:#fff; background:#000">Drop Down</div>

JavaScript

$(function() {
    $('.a').live('mouseenter', function() {
        $('#dropdown').stop(false, true).hide();

        var id = $(this).attr('id');
        $('#dropdown').css({
            position: 'absolute',
            top: $(this).offset().top + $(this).height() + 'px',
            right: '115px',
            left: $(this).offset().left + 'px',
            zIndex: 1000,
            width: '100px'
        });

        $('#dropdown').stop().slideDown(500);

        $('#dropdown').on('mouseleave', function() {
            $('#dropdown').slideUp(500);
        });
    });
    $('.a').live('mouseleave', function() {
        if ($('#dropdown').is(':hover')) {

        } else {
            $('#dropdown').slideUp(500);
        }
    });
});