Edit in JSFiddle

var $menu = $(".menu");
var $dropdown = $(".dropdown");

$menu.on("mouseenter", function() {
  $dropdown.stop().animate({
    height: 300
  });
});

var $menuMouseLeaveEvent = Rx.Observable.fromEvent($menu[0], "mouseleave");
var $dropdownMouseLeaveEvent = Rx.Observable.fromEvent($dropdown[0], "mouseleave");
var $menuMouseEnterEvent = Rx.Observable.fromEvent($menu[0], "mouseenter")
var $dropdownMouseEnterEvent = Rx.Observable.fromEvent($dropdown[0], "mouseenter")

var mouseLeaveEvent = Rx.Observable.merge($menuMouseLeaveEvent, $dropdownMouseLeaveEvent);
var mouseEnterEvent = Rx.Observable.merge($menuMouseEnterEvent, $dropdownMouseEnterEvent);

mouseLeaveEvent.map(function(e){
	return mouseEnterEvent.buffer(Rx.Observable.timer(100));
})
.concatAll()
.subscribe({
  next: function(value) {
  	//if value.length > 0, it means one or more than one mouseEnterEvent 
    // was observed during 100 ms.
    if (value.length > 0) {
      $dropdown.stop().animate({
        height: 300
      });
      //.slideDown();
    } else {
      $dropdown.stop().animate({
        height: 0
      });
      //.slideUp();
    }
  }
});

<div class="wrapper">
  <div class="menu">
    Menu
    <div class="menu_child">
      Menu Child
    </div>
  </div>
  <div class="dropdown">
    Dropdown
    <div class="dropdown_child">
      Dropdown Child
    </div>
  </div>
</div>

.wrapper {
  width: 500px;
  margin: 0 auto;
}

.menu {
  background-color: yellow;
}

.menu_child {
  background-color: #00ffd0;
  width: 300px;
  margin: 0 auto;
}

.dropdown {
  background-color: green;
  height: 0px;
  overflow: hidden;
}

.dropdown_child {
  background-color: #bc0eda;
  width: 300px;
  margin: 0 auto;
}