CSS :focus伪类实现点击展示下拉列表不生效问题求助

• 缺少下拉元素的默认隐藏规则
  你目前只写了焦点触发时的样式（opacity: 1、pointer-events: all），没有给.ulprojects设置初始的隐藏状态。默认状态下ul本身就是完全可见的，不管:focus有没有触发，列表都会直接显示，自然会觉得交互逻辑没生效。
  先补上下拉元素的默认样式：

  .ulprojects {
      /* 默认隐藏 */
      opacity: 0;
      pointer-events: none;
      /* 可选：加过渡让交互更顺滑 */
      transition: opacity 0.2s ease;
      /* 可选：把下拉定位在按钮下方，避免占布局位置 */
      position: absolute;
      top: 100%;
      left: 0;
  }
  

• 选择器匹配范围太宽泛
  现在写的button:focus + .ulprojects语法上虽然能匹配到projects按钮和紧随其后的ul，但没有做精准限定，会让浏览器遍历所有被聚焦的按钮去查找后面的.ulprojects元素，不仅有性能冗余，后续结构一旦调整很容易直接失效。
  建议把选择器收窄到对应的容器范围内：

  /* 只匹配.projects容器内、被聚焦的按钮对应的下拉列表 */
  .projects button:focus + .ulprojects {
      opacity: 1;
      pointer-events: all;
  }
  

• 按钮内嵌套链接会导致焦点丢失
  home按钮内部嵌套了<a href="#">标签，用户点击按钮时实际交互的目标是内部的a标签，焦点会直接转移到a元素上，外层button的:focus状态根本不会触发，对应的样式自然不会生效。如果不需要按钮的跳转功能，直接把内部的a标签去掉即可；如果需要跳转，可以把a标签的样式调整成和按钮一致，没必要在button内部嵌套链接。
• 纯:focus实现的交互特性要留意
  这种写法本身的逻辑是：按钮获得焦点时显示下拉，点击页面其他区域让按钮失焦时自动收起。但如果用户点击了下拉列表内部的链接，焦点会从按钮转移到链接上，导致下拉立刻收起，可能和预期体验有偏差。纯CSS实现的话需要提前了解这个特性，想要更顺滑的体验可以搭配简单JS做焦点范围的判断。

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