下拉菜单设置display:none后无法再次展开的问题如何解决？

问题根因 #

你通过JS给.dropdown-content设置的display: none是内联样式，CSS优先级高于你写的:hover伪类规则，所以就算后续鼠标悬浮在.dropdown上，CSS里的display: block也无法覆盖掉内联的none属性，导致菜单再也无法展开。

修复方案 #

方案1：移除内联样式，适配现有代码（改动最小） #

不需要额外给下拉按钮绑定点击事件，只要修改点击选项时的逻辑，把硬设display: none改为清空内联样式即可，原有CSS和HTML都不用动，修改后的JS代码如下：

const element = document.querySelector(".dropdown-content");

element.addEventListener("click", () => {
    // 移除内联display样式，让CSS的:hover规则重新接管逻辑
    element.style.display = "";
});

方案2：类名控制状态，避免优先级冲突 #

如果后续需要扩展点击展开等交互，可以用类名替代直接修改内联样式，彻底避免优先级冲突：

1. 新增CSS规则

.dropdown-content.show {
  display: block;
}

2. 调整JS逻辑

const dropdownContent = document.querySelector(".dropdown-content");
const dropdown = document.querySelector(".dropdown");

// 点击选项关闭菜单
dropdownContent.addEventListener("click", (e) => {
  e.stopPropagation(); // 阻止事件冒泡到外层下拉容器
  dropdownContent.classList.remove("show");
});

// 点击下拉按钮切换显示（可按需添加）
dropdown.addEventListener("click", () => {
  dropdownContent.classList.toggle("show");
});

如果要保留原有的悬浮展开效果，把原有CSS的hover规则修改为：

.dropdown:hover .dropdown-content:not(.show) {display: block;}

额外注意点 #

你的HTML代码里多个<a>标签使用了重复的id="drop"，id属性在同一页面内必须唯一，重复id会导致JS选择元素等逻辑出现异常，建议删除重复id、仅保留class标识即可。

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