菜单栏下拉层级渲染问题

src/home/header.tsx

@@ -17,16 +17,13 @@ export default function Header() {
     () => false,
   )
 
-  // ======================
   // 菜单状态
-  // ======================
   const [openMenu, setOpenMenu] = useState(false)
-
   const handleEnter = () => setOpenMenu(true)
   const handleLeave = () => setOpenMenu(false)
 
   return (
-    <header className={cn("fixed top-0 left-0 w-screen z-10 flex flex-col")}>
+    <header className={cn("fixed top-0 left-0 w-screen z-50 flex flex-col")}>
       <div
         className={cn(
           `flex-none pointer-events-auto`,
@@ -150,7 +147,7 @@ const MenuItem = ({
 
       <div
         className={cn(
-          "absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200",
+          "absolute top-full left-0 pt-3 w-screen max-w-4xl transition-all duration-200 z-50",
           isOpen
             ? "opacity-100 visible translate-y-0"
             : "opacity-0 invisible -translate-y-2 pointer-events-none",
@@ -160,7 +157,7 @@ const MenuItem = ({
           transform: `translateX(-7%)`,
         }}
       >
-        <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6">
+        <div className="bg-white rounded-xl shadow-2xl border border-gray-100/80 p-6 overflow-visible">
           {children}
         </div>
       </div>