✨: dropdown 默认渲染至 body

package/component/src/component/dropdown/index.less

@@ -72,13 +72,15 @@
   border-color: #EEEEEE;
 }
 
-.layui-dropdown-content .layui-dropdown{
+.layui-dropdown-content .layui-menu li.layui-disabled:hover {
+  background-color: inherit;
+}
+
+// fix style
+.layui-dropdown-menu .layui-dropdown{
+  display: block;
   width: -moz-available;
   width: -webkit-fill-available;
   width: fill-available;
   width: 100%;
 }
-
-.layui-dropdown-content .layui-menu li.layui-disabled:hover {
-  background-color: inherit;
-}

package/component/src/component/dropdown/index.vue

@@ -73,6 +73,7 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
   mouseLeaveDelay: 150,
   focusDelay: 150,
   alignPoint: false,
+  popupContainer: "body",
 });
 
 const childrenRefs = new Set<Ref<HTMLElement>>();

package/component/src/component/dropdownSubMenu/index.vue

@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<LayDropdownSubMenuProps>(), {
     :auto-fit-min-width="false"
     :contentOffset="contentOffset"
     :disabled="disabled"
+    updateAtScroll
   >
     <lay-dropdown-menu-item :disabled="disabled">
       <template v-if="$slots.prefix" #prefix>

package/component/src/component/menu/index.less

@@ -367,6 +367,15 @@
   .layui-this {
     background-color: var(--global-primary-color);
   }
+
+  // fix style
+  .layui-dropdown {
+    display: block;
+    width: -moz-available;
+    width: -webkit-fill-available;
+    width: fill-available;
+    width: 100%;
+  }
 }
 
 .layui-sub-menu-popup-theme {

package/component/src/component/subMenu/SubMenuPopup.vue

@@ -34,6 +34,7 @@ const isOpen = computed(() => {
     :autoFitMinWidth="false"
     :contentOffset="3"
     popupContainer="body"
+    updateAtScroll
     class="layui-sub-menu-popup"
   >
     <li :class="['layui-nav-item']">

package/document-component/src/document/zh-CN/components/dropdown.md

@@ -13,7 +13,7 @@
 ::: demo
 
 <template>
-  <lay-dropdown>
+  <lay-dropdown updateAtScroll>
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -45,7 +45,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown trigger="hover">
+  <lay-dropdown trigger="hover" updateAtScroll>
     <lay-button>Hover 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -56,7 +56,7 @@ export default {
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-    <lay-dropdown>
+    <lay-dropdown updateAtScroll>
     <lay-button>Click 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -67,7 +67,7 @@ export default {
     </template>
   </lay-dropdown>
     &nbsp;&nbsp;
-    <lay-dropdown trigger="contextMenu">
+    <lay-dropdown trigger="contextMenu" updateAtScroll>
     <lay-button>contextMenu 触发</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -78,7 +78,7 @@ export default {
     </template>
   </lay-dropdown>
         &nbsp;&nbsp;
-    <lay-dropdown trigger="focus">
+    <lay-dropdown trigger="focus" updateAtScroll>
     <lay-input placeholder="Focus 触发"></lay-input>
     <template #content>
         <lay-dropdown-menu>
@@ -89,7 +89,7 @@ export default {
     </template>
   </lay-dropdown>
           &nbsp;&nbsp;
-    <lay-dropdown :trigger="['hover','focus','click']">
+    <lay-dropdown :trigger="['hover','focus','click']" updateAtScroll>
     <lay-input placeholder="hover focus click"></lay-input>
     <template #content>
         <lay-dropdown-menu>
@@ -123,7 +123,7 @@ export default {
   <lay-button @click="manualRef.open()">打开</lay-button>
   <lay-button @click="manualRef.hide()">关闭</lay-button>
   <br><br>
-  <lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false">
+  <lay-dropdown ref="manualRef" :clickOutsideToClose="false" :clickToClose="false" updateAtScroll>
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -222,7 +222,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown @open="stat='开启'" @hide="stat='关闭'">
+  <lay-dropdown @open="stat='开启'" @hide="stat='关闭'" updateAtScroll>
     <lay-button type="primary" >当前状态:{{stat}}</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -255,42 +255,42 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown placement="top-left">
+  <lay-dropdown placement="top-left" updateAtScroll>
     <lay-button type="primary">topLeft</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="top">
+  <lay-dropdown placement="top" updateAtScroll>
     <lay-button type="primary">top</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="top-right">
+  <lay-dropdown placement="top-right" updateAtScroll>
     <lay-button type="primary">topRight</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="bottom-left">
+  <lay-dropdown placement="bottom-left" updateAtScroll>
     <lay-button type="primary">bottomLeft</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
     &nbsp;&nbsp;
-  <lay-dropdown placement="bottom">
+  <lay-dropdown placement="bottom" updateAtScroll>
     <lay-button type="primary">bottom</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
     &nbsp;&nbsp;
-  <lay-dropdown placement="bottom-right">
+  <lay-dropdown placement="bottom-right" updateAtScroll>
     <lay-button type="primary">bottomRight</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
@@ -298,42 +298,42 @@ export default {
   </lay-dropdown>
   <br><br>
     &nbsp;&nbsp;
-  <lay-dropdown placement="right-top">
+  <lay-dropdown placement="right-top" updateAtScroll>
     <lay-button type="primary">right-top</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
     &nbsp;&nbsp;
-  <lay-dropdown placement="right">
+  <lay-dropdown placement="right" updateAtScroll>
     <lay-button type="primary">right</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
     &nbsp;&nbsp;
-  <lay-dropdown placement="right-bottom">
+  <lay-dropdown placement="right-bottom" updateAtScroll>
     <lay-button type="primary">right-bottom</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
    &nbsp;&nbsp;
-    <lay-dropdown placement="left-top">
+    <lay-dropdown placement="left-top" updateAtScroll>
     <lay-button type="primary">left-top</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="left">
+  <lay-dropdown placement="left" updateAtScroll>
     <lay-button type="primary">left</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="left-bottom">
+  <lay-dropdown placement="left-bottom" updateAtScroll>
     <lay-button type="primary">left-bottom</lay-button>
     <template #content>
       <div style="width:300px;height:200px;"></div> 
@@ -368,7 +368,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown>
+  <lay-dropdown updateAtScroll>
     <lay-button type="primary">图标菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -413,7 +413,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-dropdown>
+  <lay-dropdown updateAtScroll>
     <lay-button type="primary">下拉菜单</lay-button>
     <template #content>
         <lay-dropdown-menu>
@@ -435,7 +435,7 @@ export default {
                    <lay-dropdown-menu-item>菜单3</lay-dropdown-menu-item>
                 </template>
               </lay-dropdown-sub-menu>
-              <lay-dropdown-sub-menu disabled>
+              <lay-dropdown-sub-menu>
                 <template #default>子菜单四</template>
                 <template #content>
                    <lay-dropdown-menu-item>菜单1</lay-dropdown-menu-item>
@@ -474,7 +474,7 @@ export default {
 ::: demo
 
 <template>
-   <lay-dropdown placement="bottom-left" autoFitWidth>
+   <lay-dropdown placement="bottom-left" autoFitWidth updateAtScroll>
     <lay-button type="primary">autoFitWidth</lay-button>
     <template #content>
       <lay-dropdown-menu>
@@ -485,7 +485,7 @@ export default {
     </template>
   </lay-dropdown>
   &nbsp;&nbsp;
-  <lay-dropdown placement="bottom-left" :autoFitMinWidth="false">
+  <lay-dropdown placement="bottom-left" :autoFitMinWidth="false" updateAtScroll>
     <lay-button type="primary">关闭 autoFitMinWidth</lay-button>
     <template #content>
       <lay-dropdown-menu>
@@ -522,7 +522,7 @@ export default {
   <lay-button  @click="triggerHeight += 100">改变触发器尺寸</lay-button>
   <lay-button  @click="contentHeight += 100">改变面板尺寸</lay-button>
   <br><br>
-  <lay-dropdown placement="bottom-left" trigger="focus" :autoFitPosition="true" :autoFixPosition="true" :blurToClose="false" :clickOutsideToClose="false">
+  <lay-dropdown placement="bottom-left" trigger="focus" :autoFitPosition="true" :autoFixPosition="true" :blurToClose="false" :clickOutsideToClose="false" updateAtScroll>
     <lay-input placeholder="autoFixPosition" :style="{height: triggerHeight + 'px'}"></lay-input>
     <template #content>
      <div :style="{width:'350px', height: contentHeight + 'px'}"></div>

package/document-component/src/document/zh-CN/components/menu.md

@@ -464,6 +464,12 @@ export default {
       <lay-menu-item id="5">
         <template #title>菜单一</template>
       </lay-menu-item>
+      <lay-sub-menu>
+        <template #title>首页</template>
+        <lay-menu-item id="7">
+          <template #title>首页</template>
+        </lay-menu-item> 
+      </lay-sub-menu>
       <lay-sub-menu id="6">
         <template #title>首页</template>
         <lay-menu-item id="7">