使用<details>标签构建下拉菜单时菜单项无法点击的问题求助

/* 让summary的伪元素不拦截点击事件 */
summary::before, summary::after {
  pointer-events: none;
}

/* 确保下拉内容层级高于其他元素 */
details > div {
  position: relative;
  z-index: 100;
}

2. 调整HTML结构 #

把链接放在单独的容器内，避免结构冲突，同时方便样式控制：

<details class="custom-dropdown">
  <summary>menu name</summary>
  <div class="dropdown-links">
    <a href="item1" rel="history">item 1</a>
    <a href="item2" rel="history">item 2</a>
    <a href="item3" rel="history">item 3</a>
    <a href="#">ALL OTHER PIES</a>
  </div>
</details>

3. 强制提升下拉内容的可点击性 #

添加以下CSS，确保下拉区域的点击事件能正常触发：

.custom-dropdown {
  position: relative;
}

.custom-dropdown .dropdown-links {
  pointer-events: auto;
  padding: 8px 0;
}

/* 强化summary的点击标识，避免交互混淆 */
.custom-dropdown summary {
  cursor: pointer;
}

4. 排查平台默认脚本冲突 #

Cargo可能对导航元素有默认的交互脚本绑定，尝试给

.custom-dropdown details {
  all: unset;
  position: relative;
  display: inline-block;
}

.custom-dropdown summary {
  all: unset;
  cursor: pointer;
  padding: 8px 12px;
  border: 1px solid #ccc;
}