使用CSS hover显示列表时错位到左侧而非对应文本下方如何解决

安全阿岳

2026-10-6

问题原因

你当前的下拉列表为默认块级元素，没有绑定定位参照，设置的width: 100%会继承上层父容器宽度，因此会对齐到页面左侧，而非对应触发文本的下方。

修改方案

只需调整两处CSS规则即可实现需求：

给触发文本的父容器（b1/b2/b3）设置相对定位，作为下拉列表的定位参照
移除下拉列表的浮动属性，改为绝对定位，对齐到父容器的底部左侧

完整修改后的CSS代码：

/* 新增：给触发容器加相对定位，改为行内块保证宽度和自身文本一致 */
.b1, .b2, .b3 {
  position: relative;
  display: inline-block;
  margin-right: 20px; /* 可自定义，调整三个触发文本的横向间距 */
}

span.myserv-in {
  /* 移除原有的float: left和width: 100%属性 */
  display: none;
  position: absolute;
  top: 100%; /* 对齐到触发文本的最下方 */
  left: 0; /* 和触发文本左对齐 */
  min-width: 280px; /* 可自定义，设置下拉列表最小宽度 */
  color: #fff;
  font-size: 16px;
  line-height: 27px;
  background: #000; /* 可自定义，加背景避免文字和下层内容重叠 */
  z-index: 999; /* 保证下拉列表浮在最上层不被遮挡 */
  padding: 10px; /* 可自定义，调整下拉区域内边距 */
}

span.myserv-in > a {
  display: block;
  color: #fff;
  text-decoration: none; /* 可自定义，去掉链接默认下划线 */
  padding: 3px 0; /* 可自定义，调整链接上下间距 */
}

span.b1:hover span.myserv-in,
span.b2:hover span.myserv-in,
span.b3:hover span.myserv-in {
  display: block;
}

p.text_show {
  cursor: pointer;
}