Projects按钮右侧边缘hover闪烁及下拉菜单边框适配问题

针对「Projects」按钮的两个异常问题，给出具体解决步骤：

1. 解决鼠标悬停右侧边缘的闪烁问题 #

闪烁核心原因是hover状态触发范围与下拉菜单定位冲突，导致鼠标在边缘区域反复触发「显示/隐藏下拉菜单」的状态切换，可通过两种方式修复：

• 方式一：给按钮容器添加底部内边距，让hover区域延伸至下拉菜单上方，消除鼠标切换时的间隙触发

  .projects-btn-container {
    padding-bottom: 4px; /* 数值可根据实际间隙调整 */
    position: relative;
  }
  

• 方式二：下拉菜单隐藏时禁用指针事件，仅在显示时恢复，避免未显示的菜单干扰hover判断

  #project_menu {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }
  .projects-btn:hover + #project_menu,
  #project_menu:hover {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }
  

2. 修复下拉菜单宽度超出、边框衔接问题 #

要实现按钮与下拉菜单边框完美衔接，需保证两者宽度、定位严格对齐：

• 步骤1：让下拉菜单继承父容器宽度，避免固定宽度导致偏差

  #project_menu {
    width: 100%; /* 需确保父容器与按钮同宽 */
    position: absolute;
    left: 0; /* 对齐父容器左侧，消除偏移 */
    top: calc(100% - 1px); /* 减去边框厚度，避免按钮与菜单边框重叠 */
    box-sizing: border-box; /* 确保内边距、边框不影响宽度计算 */
  }
  

• 步骤2：统一按钮与下拉菜单的边框样式，消除视觉错位

  .projects-btn, #project_menu {
    border: 1px solid #ccc; /* 统一边框宽度、颜色 */
  }
  .projects-btn {
    border-bottom: none; /* 隐藏按钮底部边框，避免与菜单顶部边框重叠 */
  }
  

针对Live Server中问题加剧的额外提示 #

Live Server的热重载或缓存可能导致样式渲染异常，可尝试：

• 强制刷新浏览器（Ctrl+Shift+R）清除缓存
• 检查CSS中@media规则是否在不同环境下产生样式差异
• 确认下拉菜单的父容器未被Live Server添加额外的内边距/外边距

内容的提问来源于stack exchange，提问作者Maťo Valapka