添加链接后drop-down menu悬停时菜单项无法变为黑色问题咨询

这个问题本质是CSS选择器优先级冲突导致的：你给<a>标签单独设置的金色样式优先级，高于你给父级菜单元素设置的悬停/展开状态下的黑色文字样式，浏览器会优先渲染更高优先级的a标签样式，所以颜色切换失效。

• 方案1：调整选择器优先级，给展开状态下的父元素下的a标签设置黑色样式
  你原有代码的错误写法大概率如下：

  /* 原有菜单样式 */
  .menu-item { color: goldenrod; }
  .menu-item:hover, .menu-item.open { color: black; }
  /* 新增a标签样式优先级更高，覆盖了父级的color设置 */
  .menu-item a { color: goldenrod; }
  

  修改为直接选中对应状态下的a标签设置颜色即可：

  .menu-item a { color: goldenrod; }
  .menu-item:hover a, .menu-item.open a { color: black; }
  

• 方案2：让a标签继承父级颜色（更简洁，推荐）
  直接取消给a标签单独设置固定颜色的规则，让它自动继承父级菜单的颜色属性：

  .menu-item a { color: inherit; }
  .menu-item a:visited { color: inherit; } /* 同时覆盖访问过的链接默认样式，避免颜色异常 */
  

• 方案3：临时调试用，给父级颜色设置加!important（不推荐长期使用，会污染全局样式优先级规则）

  .menu-item:hover, .menu-item.open { color: black !important; }
  

如果你的菜单是通过JS事件触发展开，需要确保展开状态下给父级菜单加的状态类名（比如示例里的open）正常生效，不要出现类名漏加、错加的问题。

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