实现hover触发的select下拉选项，解决自定义下拉列表对齐问题

原生<select>的下拉列表是浏览器原生控件，没法用CSS直接改成hover触发显示，你之前写的.p-type:hover option{display: block;}无效就是这个原因。下面给你一套完整的自定义下拉方案，同时解决下拉列表对齐问题：

完整代码实现 #

HTML结构 #

<div class="custom-select-wrap">
  <div class="custom-select">
    <div class="select-head">选择内容</div>
    <ul class="select-list">
      <li class="select-item">选项A</li>
      <li class="select-item">选项B</li>
      <li class="select-item">选项C</li>
    </ul>
  </div>
</div>

CSS样式（核心解决对齐问题） #

/* 外层容器：作为下拉列表的定位基准 */
.custom-select-wrap {
  position: relative;
  width: 220px; /* 自定义下拉框的宽度 */
}

/* 下拉框主体 */
.custom-select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

/* 下拉触发头部 */
.select-head {
  padding: 10px 15px;
  cursor: pointer;
}

/* 下拉选项列表 */
.select-list {
  position: absolute;
  top: 100%; /* 紧贴触发头部下方 */
  left: 0; /* 和触发头部左对齐 */
  width: 100%; /* 和触发头部宽度一致 */
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  display: none; /* 默认隐藏 */
}

/* hover时显示下拉列表 */
.custom-select:hover .select-list {
  display: block;
}

/* 选项样式优化 */
.select-item {
  padding: 10px 15px;
  cursor: pointer;
}

.select-item:hover {
  background-color: #f5f5f5;
}

可选JS交互（实现选择效果） #

const selectItems = document.querySelectorAll('.select-item');
const selectHead = document.querySelector('.select-head');

selectItems.forEach(item => {
  item.addEventListener('click', () => {
    selectHead.textContent = item.textContent;
  });
});

对齐问题的关键解决点 #

• 给外层容器加position: relative，让下拉列表的绝对定位以它为基准
• 下拉列表设置left: 0和width: 100%，确保和触发头部（下拉框主体）完全对齐
• top: 100%让下拉列表刚好接在触发头部下方，不会错位

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