宽屏顶栏二级及以下下拉优先向左展开

桌面导航保持一级向下展开，嵌套菜单使用 left 方向；并避免子菜单被裁切。

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: linyn-zero

src/components/Yatcc/YatccNavMenu.astro

@@ -13,33 +13,34 @@ const lang = getLangFromUrl(Astro.url);
 const t = tOfUrl(Astro.url);
 const translatePath = useTranslatedPath(lang);
 const dropdownToggle = layout === "stacked" ? "click" : "hover";
-const dropdownDirection = layout === "stacked" ? "auto" : "down";
+const topDropdownDirection = layout === "stacked" ? "auto" : "down";
+const nestedDropdownDirection = layout === "stacked" ? "auto" : "left";
 ---
 
 <div class:list={["yatcc-nav-menu", layout === "stacked" && "yatcc-nav-menu--stacked"]}>
   <Link href="https://ol.yatcc.arcsysu.cn/">&#128640; Get Started</Link>
-  <NavDropdown toggle={dropdownToggle} direction={dropdownDirection}>
+  <NavDropdown toggle={dropdownToggle} direction={topDropdownDirection}>
     <div slot="title">{t("nav.implementation")}</div>
     <Link href="https://ol.yatcc.arcsysu.cn">OL Lab</Link>
     <Link href="https://portal.aihub.arcsysu.cn">AI Hub</Link>
     <Link href="#">DT Fab</Link>
   </NavDropdown>
-  <NavDropdown toggle={dropdownToggle} direction={dropdownDirection}>
+  <NavDropdown toggle={dropdownToggle} direction={topDropdownDirection}>
     <div slot="title">{t("nav.team")}</div>
     <Link href="https://arcsysu.tech/people">arcsysu</Link>
     <Link href="https://docs.yatcc-ai.com/contributors/">{t("nav.contributors")}</Link>
   </NavDropdown>
-  <NavDropdown toggle={dropdownToggle} direction={dropdownDirection}>
+  <NavDropdown toggle={dropdownToggle} direction={topDropdownDirection}>
     <div slot="title">{t("nav.cases")}</div>
     <NavDropdown
       href={translatePath("/teaching-practice")}
-      direction={dropdownDirection}
+      direction={nestedDropdownDirection}
       toggle={dropdownToggle}
     >
       <div slot="title">{t("nav.teaching")}</div>
-      <NavDropdown direction={dropdownDirection} toggle={dropdownToggle}>
+      <NavDropdown direction={nestedDropdownDirection} toggle={dropdownToggle}>
         <div slot="title">{t("nav.compilerTeaching")}</div>
-        <NavDropdown direction={dropdownDirection} toggle={dropdownToggle}>
+        <NavDropdown direction={nestedDropdownDirection} toggle={dropdownToggle}>
           <div slot="title">{t("nav.courseSites")}</div>
           <Link href="/teach/s2026.html">2026</Link>
           <Link href="/teach/s2025.html">2025</Link>
@@ -68,6 +69,14 @@ const dropdownDirection = layout === "stacked" ? "auto" : "down";
     flex-wrap: nowrap;
   }
 
+  .yatcc-nav-menu:not(.yatcc-nav-menu--stacked) :global(.popup-card) {
+    overflow: visible;
+  }
+
+  .yatcc-nav-menu:not(.yatcc-nav-menu--stacked) :global(.dropdown-left > .popup-wrapper) {
+    z-index: 110;
+  }
+
   .yatcc-nav-menu--stacked {
     flex-direction: column;
     align-items: stretch;