/* ========================================================================== 全站统一 · 移动端导航菜单（样式取自首页 index.css） -------------------------------------------------------------------------- 背景（2026-09-16）：内页此前各自带一套「右侧抽屉式」移动菜单样式（.mobile-nav{position:fixed;right:-100%} + .m-submenu.open），而 head.html 里的菜单结构是按首页那套「下拉式」写的（.mobile-nav{position:absolute;top:100%} + .m-item.open .m-submenu），两者对不上，加上多数内页 JS 没有 toggleMobileNav / toggleSubmenu，表现为手机端「汉堡点不开 / 二级菜单点不开」。这里把首页那套样式抽出为公共文件，由 head.html 统一引入。 head.html 位于开头，晚于各页里的 CSS 加载，同优先级下本文件覆盖各页旧规则；下面显式重置了抽屉式的残留属性，避免 position/width/height 这类属性被旧规则「漏网」影响。 ========================================================================== */ .mobile-menu { display: none; font-size: 24px; cursor: pointer; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 6px; } /* 移动端下拉菜单 */ .mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); z-index: 98; max-height: calc(100vh - 80px); overflow-y: auto; /* —— 重置内页抽屉式残留（否则 width:80%/height:100vh/padding 等会干扰）—— */ width: auto; min-width: 0; max-width: none; height: auto; margin: 0; padding: 0; transition: none; transform: none; overflow-x: hidden; } .mobile-nav.open { display: block; } .mobile-nav > .m-item { border-bottom: 1px solid #f0f0f0; } .mobile-nav > .m-item > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; color: #333; text-decoration: none; font-size: 16px; } .mobile-nav > .m-item > a .arrow { transition: transform .3s; font-size: 12px; color: #999; } .mobile-nav > .m-item.open > a .arrow { transform: rotate(180deg); } .mobile-nav .m-submenu { display: none; background: #fafafa; padding: 0; margin: 0; padding-left: 0; } .mobile-nav > .m-item.open .m-submenu { display: block; } .mobile-nav .m-submenu a { display: block; padding: 12px 24px 12px 40px; color: #666; text-decoration: none; font-size: 14px; border-top: 1px solid #f0f0f0; } .mobile-nav .m-submenu a:hover { color: var(--gold, #a88b5e); } @media(max-width:768px) { nav { display: none; } .mobile-menu { display: flex; } }