菜单box-shadow尺寸不符及子菜单偏移问题排查与修复

一、子菜单面板box-shadow尺寸不匹配问题 #

原因 #

1. 所有<ul>默认设置display:flex，且子菜单未指定flex-direction，默认值为row，导致子菜单<li>横向排列，<ul>尺寸不符合垂直菜单的视觉预期。
2. hover触发时将子菜单的display改为inline-block，破坏了flex布局的一致性，使得<ul>的尺寸计算逻辑异常，最终导致box-shadow范围与菜单实际可视区域不匹配。

修复方法 #

调整子菜单的CSS样式，确保垂直布局并保持flex结构：

/* 所有子菜单 */
nav ul ul {
  position:absolute;
  display:none;
  top:0;
  left:100%;
  box-shadow:var(--menu-box-shadow);
  flex-direction: column; /* 设置垂直排列 */
}

/* 子菜单hover显示逻辑 */
nav li:hover>ul {
  display:flex; /* 保持flex布局，替换原inline-block */
}

二、子菜单4.2.1轻微上移问题 #

原因 #

HTML结构存在语法错误：[Item 4.2.1]对应的<li>标签未闭合，浏览器自动补全DOM结构时会导致父元素<li>的高度计算异常，进而引发其子菜单的定位偏移。

修复方法 #

修正HTML结构，补充[Item 4.2.1]的<li>闭合标签：

<li>[Item 4.2.1]
  <ul>
    <li>[Item 4.2.1.1]</li>
    <li>[Item 4.2.1.2]</li>
    <li>[Item 4.2.1.3]</li>
  </ul>
</li> <!-- 补充此闭合标签 -->
<li>[Item 4.2.2]</li>
<li>[Item 4.2.3]</li>

内容的提问来源于stack exchange，提问作者rhavin