如何用HTML/CSS实现点击展开、鼠标移出后自动隐藏的下拉菜单

问题原因 #

你当前的代码问题核心是:target伪类状态在点击菜单按钮后会持续留存（只要页面URL的锚点为#project就不会自动消失），配合你写的.dropdown-project:not(:hover) .dropcontent-project {display: none;}规则，会导致只要鼠标hover到菜单区域，:not(:hover)限制失效，留存的:target显示规则就会生效，下拉框自动弹出。

解决方案 #

方案1：纯CSS修改（无需改动HTML）

删除原有CSS中控制下拉显示的3条规则：

.dropdown-project:target .dropcontent-project {display: block;}
.dropdown-project:hover .dropbtn-project {background-color: var(--main-decor-color);}
.dropdown-project:not(:hover) .dropcontent-project {display: none;}

替换为如下CSS规则即可符合需求：

/* 点击按钮触发target后才允许下拉框显示 */
.dropdown-project:target .dropcontent-project {
  display: block;
}
/* 鼠标移出菜单区域时，即使处于target状态也隐藏下拉框 */
.dropdown-project:target:not(:hover) .dropcontent-project {
  display: none;
}
/* 保留按钮hover样式 */
.dropdown-project:hover .dropbtn-project {
  background-color: var(--main-decor-color);
}
/* 非target状态下，即使hover到菜单区域也不显示下拉框，解决自动弹出问题 */
.dropdown-project:not(:target):hover .dropcontent-project {
  display: none;
}

方案2：JS实现（更稳定，无锚点残留问题）

纯CSS方案会在URL中残留#project锚点，刷新页面时下拉框会自动展开，如果需要避免该问题可以用JS实现逻辑：

1. 给按钮新增id属性，方便JS选中：

<a class='dropbtn-project' href='#project' id="projectBtn">Projects</a>

2. 删除原有CSS中所有和:target相关的下拉显示控制规则
3. 加入如下JS代码：

const projectBtn = document.getElementById('projectBtn');
const dropdown = document.getElementById('project');
const dropContent = document.querySelector('.dropcontent-project');

// 点击按钮切换下拉框显示状态，阻止默认锚点跳转
projectBtn.addEventListener('click', (e) => {
  e.preventDefault();
  dropContent.style.display = dropContent.style.display === 'block' ? 'none' : 'block';
})

// 鼠标移出菜单区域时隐藏下拉框
dropdown.addEventListener('mouseleave', () => {
  dropContent.style.display = 'none';
})

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