如何使用HTML/CSS实现个人作品集站点的证书展示下拉菜单

可以通过纯HTML/CSS实现该效果，也可以搭配少量JS优化交互体验，以下是完整实现代码和说明： #

1. 基础HTML结构 #

先写好菜单的DOM结构，包含触发按钮和下拉的证书列表：

<div class="certificate-dropdown">
  <button class="dropdown-trigger">我的证书</button>
  <ul class="dropdown-list">
    <li class="cert-item">
      <span class="cert-name">前端开发工程师认证</span>
      <span class="cert-date">2023年6月</span>
    </li>
    <li class="cert-item">
      <span class="cert-name">UI设计高级认证</span>
      <span class="cert-date">2022年11月</span>
    </li>
    <li class="cert-item">
      <span class="cert-name">全栈开发实战认证</span>
      <span class="cert-date">2024年1月</span>
    </li>
    <!-- 可自行添加更多证书项 -->
  </ul>
</div>

如果需要点击证书跳转详情页，直接把<li class="cert-item">替换成<a href="证书本地路径" class="cert-item">，后续调整a标签样式去掉下划线即可。 #

2. CSS样式实现 #

纯CSS实现hover触发的下拉效果，适配参考图的视觉样式：

/* 下拉容器基础样式 */
.certificate-dropdown {
  position: relative;
  width: 300px;
  font-family: system-ui, sans-serif;
}

/* 触发按钮样式 */
.dropdown-trigger {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.2s;
}
/* 按钮右侧下拉箭头，用伪元素实现 */
.dropdown-trigger::after {
  content: "▼";
  font-size: 12px;
  color: #6b7280;
  transition: transform 0.2s;
}
.dropdown-trigger:hover {
  border-color: #2563eb;
}

/* 下拉列表默认隐藏 */
.dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  margin: 0;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.3s ease;
  z-index: 10;
}

/* hover容器时显示下拉列表 */
.certificate-dropdown:hover .dropdown-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* hover时箭头旋转 */
.certificate-dropdown:hover .dropdown-trigger::after {
  transform: rotate(180deg);
}

/* 证书项样式 */
.cert-item {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cert-item:hover {
  background-color: #f3f4f6;
}
.cert-name {
  font-size: 15px;
  color: #111827;
}
.cert-date {
  font-size: 13px;
  color: #6b7280;
}

可以根据作品集的整体设计风格，自行调整颜色、宽度、圆角等参数。 #

3. 可选JS优化（点击触发） #

如果希望点击才触发下拉、适配移动端体验，可以添加以下JS代码，同时修改对应的CSS规则：

const trigger = document.querySelector('.dropdown-trigger')
const dropdown = document.querySelector('.dropdown-list')

trigger.addEventListener('click', (e) => {
  e.stopPropagation()
  dropdown.classList.toggle('show')
  trigger.classList.toggle('active')
})

// 点击页面其他位置自动关闭下拉
document.addEventListener('click', () => {
  dropdown.classList.remove('show')
  trigger.classList.remove('active')
})

把CSS里的hover相关样式替换为类名控制即可：

/* 替换之前的hover规则 */
.dropdown-list.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-trigger.active::after {
  transform: rotate(180deg);
}

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