JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js"></script>
<div ng-app="myapp">
    <div ng-controller="showCrtl">
        <div class="top" ng-mouseover="enterMenu('top')" ng-mouseout="exitMenu('top',$event)">Mouse over me</div>
        <div ng-hide="bottom" ng-mouseover="enterMenu('bottom')" ng-mouseout="exitMenu('bottom')" class="bottom"></div>
    </div>
</div>

CSS

.top {
    background-color: blue;
    width: 100%;
    height: 150px;
}
.bottom {
    background-color: red;
    width: 50%;
    margin-left: 25%;
    height: 300px;
    position: relative;
}
.bottom {
    -webkit-transition: all 2s ease;
    /* Safari */
    transition: all 2s ease;
}
.bottom.ng-hide {
    opacity:0;
}

JavaScript

angular.module("myapp", ["ngAnimate"])

 .controller("showCrtl", function ($scope, $timeout) {
    $scope.bottom = true;
     var inside = {
         top: false,
         bottom: false
     };

    $scope.enterMenu = function (element) {
        inside[element] = true; 
        
        if (inside.top === false || inside.bottom === false) {
            $scope.bottom = false;
        }
        printObjects('entering ' + element);
    };
     $scope.exitMenu = function (element, e) {
        inside[element] = false; 
         $timeout(function() {
             if (inside.top === false && inside.bottom === false) {
                 $scope.bottom = true;
             }
         }, 100);
         printObjects('exiting ' + element);
     };
     var printObjects = function (from) {
         console.log('from: ',from,'\nshouldHide: ', $scope.bottom, '\ninside top: ', inside.top, '\ninside bottom: ', inside.bottom);
     };
});