diff --git a/docs/.vitepress/vitepress/styles/css-vars.scss b/docs/.vitepress/vitepress/styles/css-vars.scss
index 55311ec2d6..fb8a2c6d0b 100644
--- a/docs/.vitepress/vitepress/styles/css-vars.scss
+++ b/docs/.vitepress/vitepress/styles/css-vars.scss
@@ -68,7 +68,7 @@
   --code-text-color: var(--text-color);
   --code-font-family: var(--font-family-mono);
   --code-tooltip-bg-color: var(--code-bg-color);
-  --code-tooltip-color: #0C61C9;
+  --code-tooltip-color: #0c61c9;
 
   // tip block
   --block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
index 342939c31c..cb5d896b38 100644
--- a/docs/en-US/component/message-box.md
+++ b/docs/en-US/component/message-box.md
@@ -191,4 +191,4 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
 | draggable                    | whether MessageBox is draggable                                                                                                          | boolean                                                                                                                                                                                                                         | —                                | false                                            |
 | round-button                 | whether to use round button                                                                                                              | boolean                                                                                                                                                                                                                         | —                                | false                                            |
 | button-size                  | custom size of confirm and cancel buttons                                                                                                | string                                                                                                                                                                                                                          | small / default / large          | default                                          |
-| append-to              | set the root element for the message box                                                                                                         | string \| HTMLElement                                                                                                                                                                                                                         | —                                | —                                        |
+| append-to                    | set the root element for the message box                                                                                                 | string \| HTMLElement                                                                                                                                                                                                           | —                                | —                                                |
diff --git a/packages/components/menu/src/use-menu-color.ts b/packages/components/menu/src/hooks/use-menu-color.ts
similarity index 89%
rename from packages/components/menu/src/use-menu-color.ts
rename to packages/components/menu/src/hooks/use-menu-color.ts
index b7631bb58c..5efe8b9114 100644
--- a/packages/components/menu/src/use-menu-color.ts
+++ b/packages/components/menu/src/hooks/use-menu-color.ts
@@ -1,7 +1,7 @@
 import { computed } from 'vue'
 import { TinyColor } from '@ctrl/tinycolor'
 
-import type { MenuProps } from './menu'
+import type { MenuProps } from '../menu'
 
 export default function useMenuColor(props: MenuProps) {
   const menuBarColor = computed(() => {
diff --git a/packages/components/menu/src/use-menu-css-var.ts b/packages/components/menu/src/hooks/use-menu-css-var.ts
similarity index 93%
rename from packages/components/menu/src/use-menu-css-var.ts
rename to packages/components/menu/src/hooks/use-menu-css-var.ts
index e17973fd8b..7994535290 100644
--- a/packages/components/menu/src/use-menu-css-var.ts
+++ b/packages/components/menu/src/hooks/use-menu-css-var.ts
@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 import useMenuColor from './use-menu-color'
 
-import type { MenuProps } from './menu'
+import type { MenuProps } from '../menu'
 
 export const useMenuCssVar = (props: MenuProps, level: number) => {
   const ns = useNamespace('menu')
diff --git a/packages/components/menu/src/use-menu.ts b/packages/components/menu/src/hooks/use-menu.ts
similarity index 100%
rename from packages/components/menu/src/use-menu.ts
rename to packages/components/menu/src/hooks/use-menu.ts
diff --git a/packages/components/menu/src/menu-item.vue b/packages/components/menu/src/menu-item.vue
index 508147b574..b58fbb72c3 100644
--- a/packages/components/menu/src/menu-item.vue
+++ b/packages/components/menu/src/menu-item.vue
@@ -50,7 +50,7 @@ import ElTooltip from '@element-plus/components/tooltip'
 import { Effect } from '@element-plus/components/popper'
 import { throwError } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'
-import useMenu from './use-menu'
+import useMenu from './hooks/use-menu'
 import { menuItemEmits, menuItemProps } from './menu-item'
 
 import type { MenuItemRegistered, MenuProvider, SubMenuProvider } from './types'
diff --git a/packages/components/menu/src/menu.ts b/packages/components/menu/src/menu.ts
index 9f011262f3..c4dd516fa1 100644
--- a/packages/components/menu/src/menu.ts
+++ b/packages/components/menu/src/menu.ts
@@ -26,7 +26,7 @@ import { useNamespace } from '@element-plus/hooks'
 import Menubar from './utils/menu-bar'
 import ElMenuCollapseTransition from './menu-collapse-transition.vue'
 import ElSubMenu from './sub-menu'
-import { useMenuCssVar } from './use-menu-css-var'
+import { useMenuCssVar } from './hooks/use-menu-css-var'
 
 import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
 import type { NavigationFailure, Router } from 'vue-router'
@@ -134,10 +134,21 @@ export default defineComponent({
 
       // 展开该菜单项的路径上所有子菜单
       // expand all subMenus of the menu item
-      indexPath.forEach((index) => {
-        const subMenu = subMenus.value[index]
-        subMenu && openMenu(index, subMenu.indexPath)
-      })
+      const openAllActiveItem = () => {
+        indexPath.forEach((index) => {
+          const subMenu = subMenus.value[index]
+          subMenu && openMenu(index, subMenu.indexPath)
+        })
+      }
+
+      if (activeIndex.value === props.defaultActive) {
+        openAllActiveItem()
+      } else {
+        // fix: #10431
+        if (indexPath.every((index) => openedMenus.value.includes(index))) {
+          openAllActiveItem()
+        }
+      }
     }
 
     const openMenu: MenuProvider['openMenu'] = (index, indexPath) => {
diff --git a/packages/components/menu/src/sub-menu.ts b/packages/components/menu/src/sub-menu.ts
index 66ccce3506..e3b9435ef2 100644
--- a/packages/components/menu/src/sub-menu.ts
+++ b/packages/components/menu/src/sub-menu.ts
@@ -26,8 +26,8 @@ import {
 import { useNamespace } from '@element-plus/hooks'
 import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
 import { ElIcon } from '@element-plus/components/icon'
-import useMenu from './use-menu'
-import { useMenuCssVar } from './use-menu-css-var'
+import useMenu from './hooks/use-menu'
+import { useMenuCssVar } from './hooks/use-menu-css-var'
 
 import type { Placement } from '@element-plus/components/popper'
 import type { CSSProperties, ExtractPropTypes, VNodeArrayChildren } from 'vue'