diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx
index 15e300020..825be486b 100644
--- a/src/dropdown/dropdown-menu.tsx
+++ b/src/dropdown/dropdown-menu.tsx
@@ -45,14 +45,17 @@ export default defineComponent({
       set(scrollTopMap, deep, scrollTop);
     };
     onMounted(() => {
-      if (menuRef.value) {
-        const menuHeight = parseInt(window?.getComputedStyle(menuRef.value).height, 10);
+      const menuElement = menuRef.value;
+      if (menuElement) {
+        const menuChildren = menuElement.children;
         requestAnimationFrame(() => {
           if (validPanelTopContent.value) {
-            const panelTopHeight = parseInt(getComputedStyle(menuRef.value.childNodes?.[0] as HTMLElement)?.height, 10) || 0;
-            panelTopContentHeight.value = panelTopHeight;
+            const firstEl = menuChildren[0];
+            const panelTopHeight = firstEl ? parseInt(getComputedStyle(firstEl)?.height, 10) : 0;
+            panelTopContentHeight.value = panelTopHeight || 0;
           }
         });
+        const menuHeight = menuChildren?.length * 30;
         if (menuHeight >= props.maxHeight) isOverMaxHeight.value = true;
       }
     });
@@ -181,8 +184,8 @@ export default defineComponent({
     },
   },
   render() {
-    const panelTopContent = this.renderTNodeJSX('panelTopContent')?.[0];
-    const panelBottomContent = this.renderTNodeJSX('panelBottomContent')?.[0];
+    const panelTopContent = this.renderTNodeJSX('panelTopContent');
+    const panelBottomContent = this.renderTNodeJSX('panelBottomContent');
 
     return (
       <div
@@ -199,11 +202,9 @@ export default defineComponent({
         ref="menuRef"
         onScroll={(e: MouseEvent) => this.handleScroll(e, 0)}
       >
-        {panelTopContent ? <div className={`${this.dropdownClass}__top-content`}>{panelTopContent}</div> : null}
+        {panelTopContent ? <div class={`${this.dropdownClass}__top-content`}>{panelTopContent}</div> : null}
         {this.renderOptions(this.options, 0)}
-        {panelBottomContent ? (
-          <div className={`${this.dropdownClass}__bottom-content`}>{panelBottomContent}</div>
-        ) : null}
+        {panelBottomContent ? <div class={`${this.dropdownClass}__bottom-content`}>{panelBottomContent}</div> : null}
       </div>
     );
   },