style: fix SubMenu offset (#38645)

components/menu/MenuContext.tsx

@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import type { MenuProps } from 'rc-menu';
 import type { DirectionType } from '../config-provider';
 
 export type MenuTheme = 'light' | 'dark';
@@ -7,6 +8,7 @@ export interface MenuContextProps {
   prefixCls: string;
   inlineCollapsed: boolean;
   direction?: DirectionType;
+  mode?: MenuProps['mode'];
   theme?: MenuTheme;
   firstLevel: boolean;
   /** @internal Safe to remove */

components/menu/SubMenu.tsx

@@ -30,7 +30,7 @@ export interface SubMenuProps {
 function SubMenu(props: SubMenuProps) {
   const { popupClassName, icon, title, theme: customTheme } = props;
   const context = React.useContext(MenuContext);
-  const { prefixCls, inlineCollapsed, theme: contextTheme } = context;
+  const { prefixCls, inlineCollapsed, theme: contextTheme, mode } = context;
 
   const parentPath = useFullPath();
 
@@ -68,10 +68,12 @@ function SubMenu(props: SubMenuProps) {
     [context],
   );
 
+  const popupOffset = mode === 'horizontal' ? [0, 8] : [10, 0];
+
   return (
     <MenuContext.Provider value={contextValue}>
       <RcSubMenu
-        popupOffset={[10, 0]}
+        popupOffset={popupOffset}
         {...omit(props, ['icon'])}
         title={titleNode}
         popupClassName={classNames(

components/menu/menu.tsx

@@ -138,6 +138,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
       direction,
       firstLevel: true,
       theme,
+      mode: mergedMode,
       disableMenuItemTitleTooltip: _internalDisableMenuItemTitleTooltip,
     }),
     [prefixCls, mergedInlineCollapsed, direction, _internalDisableMenuItemTitleTooltip, theme],