diff --git a/src/_common b/src/_common
index 12d01a006..11eb38711 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 12d01a0067a32785344abca78087afe51c0544d5
+Subproject commit 11eb3871168585b60c22603dcdb7e46c41f62fce
diff --git a/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap b/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap
index de203e63f..e34ef2146 100644
--- a/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap
+++ b/src/menu/__tests__/__snapshots__/menu-item.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`MenuItem > props > :disabled 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-is-disabled t-menu__item--plain"
@@ -32,7 +32,7 @@ exports[`MenuItem > props > :name 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -56,7 +56,7 @@ exports[`MenuItem > props > :route 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -80,7 +80,7 @@ exports[`MenuItem > slot > <default> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
@@ -103,7 +103,7 @@ exports[`MenuItem > slot > <icon> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <li
         class="t-menu__item t-is-active t-menu__item--plain"
diff --git a/src/menu/__tests__/__snapshots__/menu.test.jsx.snap b/src/menu/__tests__/__snapshots__/menu.test.jsx.snap
index 25b6c154f..cd0a37906 100644
--- a/src/menu/__tests__/__snapshots__/menu.test.jsx.snap
+++ b/src/menu/__tests__/__snapshots__/menu.test.jsx.snap
@@ -9,7 +9,7 @@ exports[`Menu > props > :active 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -24,7 +24,7 @@ exports[`Menu > props > :collapsed 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -40,7 +40,7 @@ exports[`Menu > props > :collapsedWidth 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -56,7 +56,7 @@ exports[`Menu > props > :height 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -71,7 +71,7 @@ exports[`Menu > props > :theme 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -86,7 +86,7 @@ exports[`Menu > props > :theme 2`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -101,7 +101,7 @@ exports[`Menu > props > :width 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -116,7 +116,7 @@ exports[`Menu > slot > <default> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     >
       <div />
     </ul>
@@ -138,7 +138,7 @@ exports[`Menu > slot > <logo> 1`] = `
       <div />
     </div>
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
   </div>
 </div>
@@ -153,7 +153,7 @@ exports[`Menu > slot > <options> 1`] = `
     class="t-default-menu__inner"
   >
     <ul
-      class="t-menu t-menu--scroll narrow-scrollbar"
+      class="t-menu t-menu--scroll"
     />
     <div
       class="t-menu__operations"
diff --git a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap
index a163f285d..909127de3 100644
--- a/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap
+++ b/src/menu/__tests__/__snapshots__/submenu.test.jsx.snap
@@ -18,7 +18,7 @@ exports[`Submenu > slot > <default> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <span
       class="t-menu__content"
@@ -54,7 +54,7 @@ exports[`Submenu > slot > <icon> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <div />
     <span
@@ -73,7 +73,7 @@ exports[`Submenu > slot > <title> 1`] = `
   class="t-submenu"
 >
   <div
-    class="t-menu__item"
+    class="t-menu__item t-menu__item-spacer t-menu__item-spacer--right"
   >
     <span
       class="t-menu__content"
diff --git a/src/menu/_example/single-side.vue b/src/menu/_example/single-side.vue
index 6161ab11b..d56881d15 100644
--- a/src/menu/_example/single-side.vue
+++ b/src/menu/_example/single-side.vue
@@ -4,7 +4,7 @@
       <template #logo>
         <img height="28" src="https://tdesign.gtimg.com/site/baseLogo-light.png" alt="logo" />
       </template>
-      <t-menu-item value="item1">仪表盘</t-menu-item>
+      <t-menu-item value="item1" href="/vue" target="_blank">仪表盘</t-menu-item>
       <t-menu-item value="item2">资源列表</t-menu-item>
       <t-menu-item value="item3">根目录</t-menu-item>
       <t-menu-item value="item4" :disabled="true">调度平台</t-menu-item>
diff --git a/src/menu/const.ts b/src/menu/const.ts
index 9d67787c4..33151467a 100644
--- a/src/menu/const.ts
+++ b/src/menu/const.ts
@@ -1,7 +1,13 @@
 import { Ref } from '@vue/composition-api';
+import { TNode } from '../common';
 import { MenuValue } from './type';
 import VMenu from './v-menu';
 
+export interface TdMenuItem {
+  value: MenuValue;
+  label: TNode;
+}
+
 export type TdOpenType = 'add' | 'remove';
 export interface TdMenuInterface {
   activeValue: Ref<MenuValue>;
@@ -17,6 +23,9 @@ export interface TdMenuInterface {
 }
 
 export interface TdSubMenuInterface {
-  value: MenuValue;
+  value?: MenuValue;
   hasIcon?: boolean;
+  addMenuItem?: (item: TdMenuItem) => void;
+  setSubPopup?: (popupRef: HTMLElement) => void;
+  closeParentPopup?: (e: MouseEvent) => void;
 }
diff --git a/src/menu/menu-item.tsx b/src/menu/menu-item.tsx
index e9138da33..2c0ea8b0e 100644
--- a/src/menu/menu-item.tsx
+++ b/src/menu/menu-item.tsx
@@ -34,14 +34,13 @@ export default defineComponent({
       },
     ]);
     // methods
-    const handleClick = () => {
+    const handleClick = (e: MouseEvent) => {
+      e.stopPropagation();
       if (props.disabled) return;
       menu.select(props.value);
       ctx.emit('click');
 
-      if (props.href) {
-        window.open(props.href, props.target);
-      } else if (props.to) {
+      if (props.to) {
         const router = props.router || (ctx.root as Record<string, any>).$router;
         const methods: string = props.replace ? 'replace' : 'push';
         router[methods](props.to).catch((err: Error) => {
@@ -84,11 +83,17 @@ export default defineComponent({
         onClick={this.handleClick}
       >
         {renderTNodeJSX(this, 'icon')}
-        <span class={[`${this.classPrefix}-menu__content`]}>{renderContent(this, 'default', 'content')}</span>
+        {this.href ? (
+          <a href={this.href} target={this.target} class={`${this.classPrefix}-menu__item-link`}>
+            <span class={`${this.classPrefix}-menu__content`}>{renderContent(this, 'default', 'content')}</span>
+          </a>
+        ) : (
+          <span class={[`${this.classPrefix}-menu__content`]}>{renderContent(this, 'default', 'content')}</span>
+        )}
       </li>
     );
     // 菜单收起，且只有本身为一级菜单才需要显示 tooltip
-    if (this.collapsed && !/submenu/i.test(this.$parent.$vnode?.tag)) {
+    if (this.collapsed && /tmenu/i.test(this.$parent.$vnode?.tag)) {
       return (
         <Tooltip content={() => renderContent(this, 'default', 'content')} placement="right">
           {liContent}
diff --git a/src/menu/menu.tsx b/src/menu/menu.tsx
index d5f487c0f..f84fb72d1 100644
--- a/src/menu/menu.tsx
+++ b/src/menu/menu.tsx
@@ -29,11 +29,7 @@ export default defineComponent({
         [`${classPrefix.value}-is-collapsed`]: props.collapsed,
       },
     ]);
-    const innerClasses = computed(() => [
-      `${classPrefix.value}-menu`,
-      { [`${classPrefix.value}-menu--scroll`]: mode.value !== 'popup' },
-      'narrow-scrollbar',
-    ]);
+    const innerClasses = computed(() => [`${classPrefix.value}-menu`, `${classPrefix.value}-menu--scroll`]);
     const expandWidth = computed(() => {
       const { width } = props;
       const format = (val: string | number) => (typeof val === 'number' ? `${val}px` : val);
diff --git a/src/menu/submenu.tsx b/src/menu/submenu.tsx
index bfd219817..01ecc40a7 100644
--- a/src/menu/submenu.tsx
+++ b/src/menu/submenu.tsx
@@ -7,15 +7,21 @@ import {
   onMounted,
   getCurrentInstance,
   watch,
+  toRefs,
+  nextTick,
+  reactive,
 } from '@vue/composition-api';
+import isFunction from 'lodash/isFunction';
 import props from './submenu-props';
 import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
 import FakeArrow from '../common-components/fake-arrow';
 import Ripple from '../utils/ripple';
-import { TdMenuInterface, TdSubMenuInterface } from './const';
+import { TdMenuInterface, TdSubMenuInterface, TdMenuItem } from './const';
 import { getKeepAnimationMixins } from '../config-provider/config-receiver';
 import { AnimationType } from '../config-provider/type';
 import { usePrefixClass } from '../hooks/useConfig';
+import { Popup, PopupPlacement } from '../popup';
+import { TNode } from '../common';
 
 const keepAnimationMixins = getKeepAnimationMixins();
 
@@ -34,11 +40,14 @@ export default defineComponent({
     const {
       theme, activeValues, expandValues, mode, isHead, open,
     } = menu;
-    const submenu = inject<TdSubMenuInterface>('TdSubmenu', null);
+    const submenu = inject<TdSubMenuInterface>('TdSubmenu', {});
+    const { setSubPopup, closeParentPopup } = submenu;
+
     const classPrefix = usePrefixClass();
 
     const isActive = computed(() => activeValues.value.indexOf(props.value) > -1);
     const popupVisible = ref(false);
+    const isCursorInPopup = ref(false);
     const rippleColor = computed(() => (theme.value === 'light' ? '#E7E7E7' : '#383838'));
     const isOpen = computed(() => {
       if (mode.value === 'popup') {
@@ -46,7 +55,13 @@ export default defineComponent({
       }
       return expandValues ? expandValues.value.includes(props.value) : false;
     });
+    const menuItems = ref([]);
     const isNested = ref(false); // 是否嵌套
+
+    const popupWrapperRef = ref<HTMLElement>();
+    const subPopupRef = ref<HTMLElement>();
+    const submenuRef = ref<HTMLElement>();
+
     const classes = computed(() => [
       `${classPrefix.value}-submenu`,
       {
@@ -56,13 +71,15 @@ export default defineComponent({
     ]);
     const popupClass = computed(() => [
       `${classPrefix.value}-menu__popup`,
+      `${classPrefix.value}-is-${isHead ? 'horizontal' : 'vertical'}`,
       {
         [`${classPrefix.value}-is-opened`]: popupVisible.value,
-        [`${classPrefix.value}-is-vertical`]: !isHead,
       },
     ]);
     const submenuClass = computed(() => [
       `${classPrefix.value}-menu__item`,
+      `${classPrefix.value}-menu__item-spacer`,
+      `${classPrefix.value}-menu__item-spacer--${isHead && !isNested.value ? 'bottom' : 'right'}`,
       {
         [`${classPrefix.value}-is-disabled`]: props.disabled,
         [`${classPrefix.value}-is-opened`]: isOpen.value,
@@ -81,14 +98,65 @@ export default defineComponent({
       },
     ]);
 
+    const passSubPopupRefToParent = (val: HTMLElement) => {
+      if (isFunction(setSubPopup)) {
+        setSubPopup(val);
+      }
+    };
+
     // methods
     const handleMouseEnter = () => {
       if (props.disabled) return;
-      popupVisible.value = true;
+      setTimeout(() => {
+        if (!popupVisible.value) {
+          open(props.value);
+          // popupVisible设置为TRUE之后打开popup，因此需要在nextTick中确保可以拿到ref值
+          nextTick(() => {
+            passSubPopupRefToParent(popupWrapperRef.value);
+          });
+        }
+        popupVisible.value = true;
+      }, 0);
+    };
+
+    const targetInPopup = (el: HTMLElement) => el?.classList.contains(`${classPrefix.value}-menu__popup`);
+    const loopInPopup = (el: HTMLElement): boolean => {
+      if (!el) return false;
+      return targetInPopup(el) || loopInPopup(el.parentElement);
+    };
+
+    const handleMouseLeave = (e: MouseEvent) => {
+      setTimeout(() => {
+        const inPopup = targetInPopup(e.relatedTarget as HTMLElement);
+
+        if (isCursorInPopup.value || inPopup) return;
+        popupVisible.value = false;
+      }, 0);
+    };
+
+    const handleMouseLeavePopup = (e: any) => {
+      const { toElement, relatedTarget } = e;
+      let target = toElement || relatedTarget;
+
+      if (target === subPopupRef.value) return;
+
+      const isSubmenu = (el: Element) => el === submenuRef.value;
+      while (target !== null && target !== document && !isSubmenu(target)) {
+        target = target.parentNode;
+      }
+
+      isCursorInPopup.value = false;
+
+      if (!isSubmenu(target)) {
+        popupVisible.value = false;
+      }
+
+      closeParentPopup?.(e);
     };
-    const handleMouseLeave = () => {
-      popupVisible.value = false;
+    const handleEnterPopup = () => {
+      isCursorInPopup.value = true;
     };
+
     const handleSubmenuItemClick = () => {
       if (props.disabled) return;
       open(props.value);
@@ -99,34 +167,108 @@ export default defineComponent({
     });
 
     // provide
-    provide<TdSubMenuInterface>('TdSubmenu', {
-      value: props.value,
+    const { value } = toRefs(props);
+    provide<TdSubMenuInterface>(
+      'TdSubmenu',
+      reactive({
+        value,
+        addMenuItem: (item: TdMenuItem) => {
+          menuItems.value.push(item);
+          if (submenu) {
+            submenu.addMenuItem(item);
+          }
+        },
+        setSubPopup: (ref: HTMLElement) => {
+          subPopupRef.value = ref;
+        },
+        closeParentPopup: (e: MouseEvent) => {
+          const related = e.relatedTarget as HTMLElement;
+          if (loopInPopup(related)) return;
+          handleMouseLeavePopup(e);
+        },
+      }),
+    );
+
+    watch(popupWrapperRef, () => {
+      // 第一次触发nextTick会取空值，导致subPopupRef拿不到对应的DOM
+      passSubPopupRefToParent(popupWrapperRef.value);
     });
 
     onMounted(() => {
       menu?.vMenu?.add({ value: props.value, parent: submenu?.value });
       const instance = getCurrentInstance();
-      isNested.value = /submenu/i.test(instance.parent.vnode?.tag);
+      let node = instance.parent;
+
+      while (node && isHead) {
+        if (/submenu/i.test(node.vnode?.tag)) {
+          isNested.value = true;
+          break;
+        }
+        node = node?.parent;
+      }
     });
 
     return {
+      theme,
       mode,
       isHead,
       isNested,
+      popupVisible,
       classes,
       subClass,
       arrowClass,
       popupClass,
       submenuClass,
       rippleColor,
+      popupWrapperRef,
+      handleEnterPopup,
       handleMouseEnter,
       handleMouseLeave,
+      handleMouseLeavePopup,
       handleSubmenuItemClick,
       classPrefix,
     };
   },
   methods: {
+    renderPopup(triggerElement: TNode[]) {
+      let placement = 'right-top';
+      if (!this.isNested && this.isHead) {
+        placement = 'bottom-left';
+      }
+      const overlayInnerStyle = this.isNested && this.isHead ? { marginLeft: '0px' } : { marginTop: '12px' };
+
+      const popupWrapper = (
+        <div
+          ref="popupWrapperRef"
+          class={[
+            `${this.classPrefix}-menu__spacer`,
+            `${this.classPrefix}-menu__spacer--${!this.isNested && this.isHead ? 'top' : 'left'}`,
+          ]}
+          onMouseenter={this.handleEnterPopup}
+          onMouseleave={this.handleMouseLeavePopup}
+        >
+          <ul class={`${this.classPrefix}-menu__popup-wrapper`}>{renderContent(this, 'default', 'content')}</ul>
+        </div>
+      );
+      const realPopup = (
+        <Popup
+          overlayInnerClassName={[...this.popupClass]}
+          overlayClassName={[`${this.classPrefix}-menu--${this.theme}`, this.isHead && `${this.classPrefix}-is-head`]}
+          visible={this.popupVisible}
+          placement={placement as PopupPlacement}
+          overlayInnerStyle={overlayInnerStyle}
+          content={() => popupWrapper}
+        >
+          <div ref="submenuRef" class={this.submenuClass}>
+            {triggerElement}
+          </div>
+        </Popup>
+      );
+
+      return realPopup;
+    },
     renderHeadSubmenu() {
+      const icon = renderTNodeJSX(this, 'icon');
       const rippleVal = (this.keepAnimation as Record<AnimationType, boolean>).ripple ? this.rippleColor : false;
       const normalSubmenu = [
         <div v-ripple={rippleVal} class={this.submenuClass} onClick={this.handleSubmenuItemClick}>
@@ -135,21 +277,17 @@ export default defineComponent({
         <ul style="opacity: 0; width: 0; height: 0; overflow: hidden">{renderContent(this, 'default', 'content')}</ul>,
       ];
 
-      const popupSubmenu = [
-        <div class={this.submenuClass}>
-          {renderTNodeJSX(this, 'title')}
-          <fake-arrow
-            overlayClassName={/submenu/i.test(this.$parent.$vnode?.tag) ? null : this.arrowClass}
-            overlayStyle={{ transform: `rotate(${this.isNested ? -90 : 0}deg)` }}
-          />
-        </div>,
-        <div ref="popup" class={this.popupClass}>
-          <ul ref="popupInner" class={`${this.classPrefix}-menu__popup-wrapper`}>
-            {renderContent(this, 'default', 'content')}
-          </ul>
-        </div>,
+      const needRotate = this.mode === 'popup' && this.isNested;
+
+      const triggerElement = [
+        icon,
+        <span class={[`${this.classPrefix}-menu__content`]}>{renderTNodeJSX(this, 'title', { silent: true })}</span>,
+        <FakeArrow
+          overlayClassName={/menu/i.test(this.$parent.$options.name) ? this.arrowClass : null}
+          overlayStyle={{ transform: `rotate(${needRotate ? -90 : 0}deg)` }}
+        />,
       ];
-      return this.mode === 'normal' ? normalSubmenu : popupSubmenu;
+      return this.mode === 'normal' ? normalSubmenu : this.renderPopup(triggerElement);
     },
     renderSubmenu() {
       const hasContent = this.$slots.content || this.$slots.default;
@@ -179,20 +317,16 @@ export default defineComponent({
           {child}
         </ul>,
       ];
-      const popupSubmenu = [
-        <div class={this.submenuClass}>
-          {icon}
-          <span class={[`${this.classPrefix}-menu__content`]}>{renderTNodeJSX(this, 'title')}</span>
-          <fake-arrow overlayStyle={{ transform: `rotate(${needRotate ? -90 : 0}deg)` }} />
-        </div>,
-        <div ref="popup" class={this.popupClass}>
-          <ul ref="popupInner" class={`${this.classPrefix}-menu__popup-wrapper`}>
-            {child}
-          </ul>
-        </div>,
+      const triggerElement = [
+        icon,
+        <span class={[`${this.classPrefix}-menu__content`]}>{renderTNodeJSX(this, 'title', { silent: true })}</span>,
+        <FakeArrow
+          overlayClassName={/menu/i.test(this.$parent.$options.name) ? this.arrowClass : null}
+          overlayStyle={{ transform: `rotate(${needRotate ? -90 : 0}deg)`, 'margin-left': 'auto' }}
+        />,
       ];
 
-      return this.mode === 'normal' ? normalSubmenu : popupSubmenu;
+      return this.mode === 'normal' ? normalSubmenu : this.renderPopup(triggerElement);
     },
   },
   render() {