diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
index bb72504..eb3d1c2 100644
--- a/src/components/MenuBar.vue
+++ b/src/components/MenuBar.vue
@@ -35,6 +35,7 @@
           :is-touch-device="isMobileDevice"
           :on-selected="handleSelected"
           :highlight-first-element="highlightFirstElement"
+          @deactivate="handleDeactivateMenu"
           @activate="handleActivateMenu"
           @activate-next="handleActivateDir"
           @activate-previous="handleActivateDir"
@@ -186,6 +187,7 @@ export default defineComponent({
         activeMenuSelection.value = -1;
         activeMenuBarId.value = "";
         highlightFirstElement.value = false;
+        handleDeactivateMenu();
       }
     };
 
@@ -303,6 +305,17 @@ export default defineComponent({
       );
     };
 
+    const handleDeactivateMenu = () => {
+      // keep the menubar when the sub menu is being displayed
+      if (!menuActive.value) {
+        menuItems.value = menuItems.value.map((item) =>
+          Object.assign({}, item, {
+            showMenu: false,
+          })
+        );
+      }
+    };
+
     const handleOnShowMenu = (state: boolean, id: string) => {
       menuActive.value = state;
       if (state) {
@@ -322,6 +335,8 @@ export default defineComponent({
         dockPosition.value === DockPosition.RIGHT
       ) {
         return menuBarActive.value ? "expanded" : "not-expanded";
+      } else {
+        return "";
       }
     });
 
@@ -347,7 +362,7 @@ export default defineComponent({
         menuItems.value = result.navigateMenu.items;
       } else if ("navigateMenubar" in result) {
         highlightFirstElement.value = true;
-        let {
+        const {
           navigateMenubar: { nextId },
         } = result;
         activeMenuBarId.value = nextId;
@@ -374,6 +389,7 @@ export default defineComponent({
       expandClass,
       handleActivateDir,
       handleActivateMenu,
+      handleDeactivateMenu,
       handleDrag,
       handleDragCancel,
       handleDragEnd,
diff --git a/src/components/MenuBarItem.vue b/src/components/MenuBarItem.vue
index 96dbdda..c36fd56 100644
--- a/src/components/MenuBarItem.vue
+++ b/src/components/MenuBarItem.vue
@@ -4,7 +4,8 @@
     :class="[...menuBarStyle, 'menu-bar-item-container']"
     :style="{ background: bgColor }"
     tabindex="0"
-    @mouseenter="setMenuViewable()"
+    @mouseenter="setMenuViewable(true)"
+    @mouseleave="setMenuViewable(false)"
     @keyup="handleKeyUp"
   >
     <span
@@ -131,6 +132,7 @@ export default defineComponent({
   },
   emits: [
     "show",
+    "deactivate",
     "activate",
     "selected",
     "activate-next",
@@ -157,7 +159,13 @@ export default defineComponent({
     });
 
     // activate menu
-    const setMenuViewable = () => emit("activate", props.id);
+    const setMenuViewable = (viewable: boolean) => {
+      if (viewable) {
+        emit("activate", props.id);
+      } else {
+        emit("deactivate", props.id);
+      }
+    }
 
     // toggle menu
     const toggleMenu = (event: MouseEvent | TouchEvent) => {
@@ -171,7 +179,7 @@ export default defineComponent({
     const highlightIndex = ref(-1);
 
     const computeMenuStyle = () => {
-      let newStyle: {
+      const newStyle: {
         top?: string;
         left?: string;
         right?: string;