JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="showCrtl">
        <div class="top" ng-mouseover="menu()" ng-mouseout="menu()">Mouse over me</div>
        <div ng-hide="bottom" ng-mouseover="menu()" ng-mouseout="menu()" 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;
}

JavaScript

function showCrtl($scope){
    $scope.bottom = true;
    
       $scope.menu = function() {
        if($scope.bottom) {
            $scope.bottom = false;
        }

        else {
            $scope.bottom = true;
        }
    };
}