1. Multi-Layer Indexing: By using nested lists, we create a logical map for search engines. Even deep links (Level 3+) are indexed immediately.
2. JS-Free Interaction: We use the :hover and :focus-within selectors to trigger the 2nd and 3rd tiers. If JS is disabled, the site remains 100% navigable.
3. Clean Code: Zero divs are used in the navigation structure. Only <nav>, <ul>, <li>, and <a>.
1. 多层级索引： 通过嵌套列表，我们为搜索引擎创建了逻辑地图。即使是深层链接（三级及以上）也会被立即索引。
2. 无 JS 交互： 我们利用 :hover 和 :focus-within 选择器来触发二级和三级菜单。即使禁用 JS，网站依然可以 100% 正常导航。
3. 纯净代码： 导航结构中使用了零个 div。仅使用 <nav>, <ul>, <li>, 和 <a>。
Unlike JavaScript-driven menus that require user interaction to reveal sub-links, this
semantic multi-level navigation uses a nested <ul>
and <li> structure. This allows search engine spiders to discover
your entire site hierarchy during the initial HTML crawl, improving the indexing of deep
"Level 3" pages.
与需要用户交互才能显示子链接的 JS 驱动菜单不同，这种语义化多级导航采用嵌套的
<ul> 和 <li> 结构。这允许搜索引擎爬虫在初始
HTML 抓取期间发现您的整个网站层级，从而提高对深层（三级）页面的索引效率。
By utilizing modern CSS pseudo-classes like :focus-within, this menu remains
fully accessible to keyboard users and screen readers natively. Removing the need for
initialization scripts reduces "Cumulative Layout Shift" (CLS) and ensures the menu is
functional as soon as the first byte of HTML is rendered.
通过利用 :focus-within 等现代 CSS 伪类，该菜单对键盘用户和屏幕阅读器保持原生可访问性。
无需初始化脚本减少了“累积布局偏移”(CLS)，并确保在 HTML 的首字节渲染时导航即可使用。