实现下拉菜单激活/点击时显示box-shadow，需要JS/jQuery吗？

此前使用#menu ul li ul:active未达到预期的核心原因：:active伪类仅匹配鼠标按键按下且未松开的瞬时交互状态，和下拉菜单「展开激活显示」的常驻状态完全不匹配，无法覆盖菜单展开后的完整显示周期。

纯CSS实现（适配hover触发的下拉菜单） #

该场景下完全不需要JS即可实现需求，调整逻辑如下：

• 第一步：修改子菜单的默认基础样式，移除全局生效的阴影规则，将默认阴影值设为none，其余布局、边框相关样式保持不变
• 第二步：通过父级菜单项的交互状态联动控制子菜单阴影：下拉子菜单本身没有独立的激活态，它的显示完全依赖父级菜单项的状态，因此只需要在父级处于激活交互状态时，为内部的子菜单追加阴影样式即可

对应样式代码：

/* 子菜单默认基础样式（无阴影） */
#menu ul li ul {
    height: auto;
    overflow: hidden;
    position: absolute;
    z-index: 99999 !important;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    border-right: 3px solid #171314;
    border-bottom: 3px solid #171314;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* 父级菜单项处于hover/键盘聚焦激活状态时，子菜单显示指定阴影 */
#menu ul li:hover > ul,
#menu ul li:focus-within > ul {
    -webkit-box-shadow: 3px 2px 2px 0px #0F0B0C; 
    box-shadow: 3px 2px 2px 0px #0F0B0C;
}

点击触发下拉的适配方案（结合轻量JS） #

如果你的下拉菜单为点击父项才展开（而非hover触发），纯CSS无法匹配点击后的常驻激活状态，可通过少量JS实现状态标记，完全不依赖第三方库：

• 核心逻辑：为当前展开的父级菜单项追加固定激活类名，通过类名联动控制子菜单的阴影显示
• 对应CSS规则：

/* 父级菜单项带有is-active激活标记时，子菜单显示阴影 */
#menu ul li.is-active > ul {
    -webkit-box-shadow: 3px 2px 2px 0px #0F0B0C; 
    box-shadow: 3px 2px 2px 0px #0F0B0C;
}

• 极简交互逻辑代码：

// 选中所有嵌套了下拉子菜单的父级菜单项
const dropdownContainers = document.querySelectorAll('#menu ul li:has(ul)');
dropdownContainers.forEach(container => {
  container.addEventListener('click', (e) => {
    // 清除所有其他菜单项的激活状态
    dropdownContainers.forEach(item => item.classList.remove('is-active'));
    // 为当前点击的菜单项添加激活标记
    container.classList.add('is-active');
    e.stopPropagation();
  })
})
// 点击页面空白区域时，清除所有菜单项的激活状态
document.addEventListener('click', () => {
  dropdownContainers.forEach(item => item.classList.remove('is-active'));
})

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