diff --git a/packages/semi-ui/dropdown/__test__/dropdown.test.js b/packages/semi-ui/dropdown/__test__/dropdown.test.js
index e673431831..2bdeebbef5 100644
--- a/packages/semi-ui/dropdown/__test__/dropdown.test.js
+++ b/packages/semi-ui/dropdown/__test__/dropdown.test.js
@@ -1,3 +1,4 @@
+import React, { useState } from 'react';
 import { Icon, Dropdown, Tag } from '../../index';
 import { string } from 'prop-types';
 import { noop, drop } from 'lodash';
@@ -309,4 +310,5 @@ describe('Dropdown', () => {
         DD.update()
         expect(DD.find('.semi-dropdown-menu').children().length).toEqual(menu2.length - 1);
     });
+    
 });
diff --git a/packages/semi-ui/dropdown/_story/dropdown.stories.jsx b/packages/semi-ui/dropdown/_story/dropdown.stories.jsx
index 8dfece4c42..f0cad11ea4 100644
--- a/packages/semi-ui/dropdown/_story/dropdown.stories.jsx
+++ b/packages/semi-ui/dropdown/_story/dropdown.stories.jsx
@@ -395,4 +395,67 @@ export function Fix1606() {
           <TextArea style={{ width: 200 }} defaultValue='请尝试在此处使用上下箭头切换当前行'/>
       </Dropdown>
   );
-}
\ No newline at end of file
+}
+
+export function NestedDropdownIssue() {
+    const [visible, setVisible] = React.useState(false);
+    return (
+        <div>
+            <Dropdown
+                trigger="custom"
+                visible={visible}
+                onClickOutSide={() => {
+                    console.log('1. Parent onClickOutSide triggered, closing');
+                    setVisible(false);
+                }}
+                render={
+                    <Dropdown.Menu>
+                        <Dropdown.Title>Render 嵌套</Dropdown.Title>
+                        <Dropdown
+                            position="rightTop"
+                            render={
+                                <Dropdown.Menu>
+                                    <Dropdown
+                                        position="rightTop"
+                                        render={
+                                            <Dropdown.Menu>
+                                                <Dropdown.Item onClick={() => console.log('3. Grandchild menu onClick triggered')}>
+                                                    Grandchild Item (Click me)
+                                                </Dropdown.Item>
+                                                <Dropdown.Item onClick={() => console.log('3. Grandchild Item 2 clicked')}>
+                                                    Grandchild Item 2
+                                                </Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        }
+                                    >
+                                        <Dropdown.Item>Hover to expand grandchild</Dropdown.Item>
+                                    </Dropdown>
+                                    <Dropdown.Item onClick={() => console.log('2. Child menu onClick triggered')}>
+                                        Child Item
+                                    </Dropdown.Item>
+                                </Dropdown.Menu>
+                            }
+                        >
+                            <Dropdown.Item>Hover to expand child menu</Dropdown.Item>
+                        </Dropdown>
+                        <Dropdown.Title>Menu 嵌套</Dropdown.Title>
+                        <Dropdown
+                            position="rightTop"
+                            trigger="click"
+                            menu={[
+                                { node: 'item', name: 'Menu Child Item 1', onClick: () => console.log('2. Menu Child Item 1 clicked') },
+                                { node: 'item', name: 'Menu Child Item 2', onClick: () => console.log('2. Menu Child Item 2 clicked') },
+                                { node: 'divider' },
+                                { node: 'item', name: 'Menu Child Item 3', onClick: () => console.log('2. Menu Child Item 3 clicked') },
+                            ]}
+                        >
+                            <Dropdown.Item>Click to expand child menu</Dropdown.Item>
+                        </Dropdown>
+                    </Dropdown.Menu>
+                }
+            >
+                <Button onClick={() => setVisible(true)}>Open Dropdown</Button>
+            </Dropdown>
+        </div>
+    );
+}
diff --git a/packages/semi-ui/dropdown/index.tsx b/packages/semi-ui/dropdown/index.tsx
index 2de272ba87..b5a1407646 100644
--- a/packages/semi-ui/dropdown/index.tsx
+++ b/packages/semi-ui/dropdown/index.tsx
@@ -154,7 +154,10 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
         }
         return (
             <DropdownContext.Provider value={contextValue}>
-                <div className={className} style={style}>
+                <div
+                    className={className}
+                    style={style}
+                >
                     <div className={`${prefixCls}-content`} x-semi-prop="render">{content}</div>
                 </div>
             </DropdownContext.Provider>
@@ -238,7 +241,6 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                 zIndex={zIndex}
                 motion={motion}
                 margin={margin}
-                content={pop}
                 className={className}
                 prefixCls={prefixCls}
                 spacing={spacing}
@@ -249,6 +251,7 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                 returnFocusOnClose={true}
                 ref={this.tooltipRef}
                 {...attr}
+                content={pop}
             >
                 {React.isValidElement(children) ?
                     React.cloneElement(children, {