diff --git a/src/app/theme/sidebar/sidebar.component.ts b/src/app/theme/sidebar/sidebar.component.ts
index 5dd7eddb..5f10ab38 100644
--- a/src/app/theme/sidebar/sidebar.component.ts
+++ b/src/app/theme/sidebar/sidebar.component.ts
@@ -24,6 +24,8 @@ export class Sidebar {
   hoverElemHeight: number;
   hoverElemTop: number;
 
+  outOfArea: number = -200;
+
   isMenuShouldCollapsed: boolean = false;
 
   constructor(private elementRef: ElementRef, private router: Router, private _sidebarService: SidebarService, private _sidebarStateService: SidebarStateService) {
diff --git a/src/app/theme/sidebar/sidebar.html b/src/app/theme/sidebar/sidebar.html
index 28881677..7bc04535 100644
--- a/src/app/theme/sidebar/sidebar.html
+++ b/src/app/theme/sidebar/sidebar.html
@@ -1,4 +1,4 @@
-<aside class="al-sidebar">
+<aside class="al-sidebar" (mouseleave)="hoverElemTop=outOfArea">
   <ul class="al-sidebar-list">
     <li *ngFor="#item of menuItems" class="al-sidebar-list-item"
         [ngClass]="{'selected': item.selected, 'with-sub-menu': item.subMenu}">