JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://bootsnipp.com/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootsnipp.com/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootsnipp.com/css/bootstrap-responsive.min.css">
<div class="navbar navbar-inverse nav">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="/">CMS</a>
			
          	<div class="nav-collapse collapse">
              <ul class="nav">
                  <li class="divider-vertical"></li>
                  <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
              </ul>
              <div class="pull-right">
                <ul class="nav pull-right">
                    <li id="myDropDown" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                            <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                            <li class="divider"></li>
                            <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                        </ul>
                    </li>
                </ul>
              </div>
            </div>
        </div>
    </div>
</div>

JavaScript

var handleHover = function(evObj){
    var $this = $(this);
    
    if(!$this.hasClass('open')){
        return true;
    }
    
    if(evObj.type === 'mouseleave'){
        //    on mouseleave...
        handleHover.timer = setTimeout(function(){
            $this.removeClass('open');
        },2000);
        
    } else if(evObj.type === 'mouseenter'){
        //    on mouseenter...
        if(handleHover.timer){    //    find timer and clear it
            clearTimeout(handleHover.timer);
            delete handleHover.timer;
        }
    }
};


$('#myDropDown').hover(handleHover);