CSS图片悬停显示菜单失效问题：现有代码排查求助

嘿，我一眼就瞅出问题所在啦！你当前的CSS选择器逻辑不对，导致悬停图片时根本找不到对应的菜单元素~

问题根源 #

你写的.locklear-brand img:hover > ul是在找img标签的直接子元素ul，但看你的HTML结构，ul和img是平级的兄弟元素（都在.locklear-brand容器里），这个选择器完全匹配不到目标，所以悬停自然没反应。

两种修正方案 #

根据你的需求，给你两种可行的写法：

方案1：悬停整个品牌容器时显示菜单（推荐）

这种方式体验更流畅，菜单弹出后，鼠标移到菜单上不会突然消失：

.locklear-brand { 
  float: right; 
  padding-right: 50px;
  position: relative; /* 给绝对定位的ul做定位参考 */
} 
.locklear-brand img { 
  width: 30px; 
  padding-top: 5px; 
} 
.locklear-brand ul { 
  display: none; 
  position: absolute;
  top: 100%; /* 让菜单在图片下方弹出 */
  right: 50px; /* 和容器的右内边距对齐 */
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff; /* 加背景避免和页面内容重叠 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} 
/* 悬停容器时显示菜单 */
.locklear-brand:hover ul { 
  display: block; 
} 
.locklear-brand ul li { 
  width:170px; 
  float:none; 
  display:list-item; 
  position: relative;
  padding: 8px 12px; /* 加内边距扩大点击区域 */
}

方案2：仅悬停图片时显示菜单

如果必须只在鼠标碰到图片时才弹出菜单，就用相邻兄弟选择器+，匹配紧接在img后面的ul：

/* 基础样式和方案1一致，仅修改hover选择器 */
.locklear-brand img:hover + ul { 
  display: block; 
}

关键补充 #

一定要给.locklear-brand加上position: relative，不然绝对定位的ul会相对于整个页面定位，而不是在图片旁边弹出哦~

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