WordPress中如何基于<ul><li>元素仅用CSS实现下拉筛选菜单

完全可以在不修改现有HTML结构、不插入额外按钮元素的前提下，纯CSS实现下拉筛选效果，无需改动主题小组件的原始输出代码。

核心实现原理 #

不需要新增任何DOM节点，依托现有标签的CSS能力完成交互：

• 以外层.gs-filters容器为定位基准，通过::after伪元素模拟下拉箭头、触发器视觉样式，替代需要额外插入的按钮元素
• 默认状态下限制筛选列表高度，仅露出首项/当前选中项，其余选项通过溢出隐藏收起
• 借助:hover（桌面端鼠标悬停）、:focus-within（触控/键盘操作聚焦）伪类触发展开状态，展示全部筛选项
• 完全保留原有<a>标签的筛选跳转逻辑，和主题组件原有功能100%兼容

可用代码 #

将以下代码粘贴到WordPress后台「外观-自定义-额外CSS」中即可生效：

/* 下拉容器基础设置 */
.gs-filters {
  position: relative;
  width: fit-content;
  min-width: 180px;
  z-index: 99; /* 按需调整，避免被其他页面元素遮挡 */
}

/* 伪元素生成下拉箭头 */
.gs-filters::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* 列表默认收起状态 */
#filters {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  max-height: 42px; /* 与单行选项高度保持一致 */
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 悬停/聚焦时展开下拉 */
.gs-filters:hover #filters,
.gs-filters:focus-within #filters {
  max-height: 500px; /* 数值大于所有筛选项的总高度即可 */
  overflow-y: auto; /* 选项过多时自动出现滚动条 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 展开状态下箭头翻转 */
.gs-filters:hover::after,
.gs-filters:focus-within::after {
  transform: translateY(-50%) rotate(180deg);
}

/* 筛选项基础样式 */
#filters li a {
  display: block;
  padding: 10px 36px 10px 16px;
  color: #333;
  text-decoration: none;
  line-height: 1.4;
}

#filters li a:hover {
  background: #f5f5f5;
}

/* 适配当前选中项样式，可根据主题实际类名调整 */
#filters li.current-cat a,
#filters li.active a {
  background: #f0f0f0;
  font-weight: 500;
}

自定义调整说明 #

• 可修改min-width、配色、圆角、内边距等属性，匹配站点现有设计风格
• 如果主题给当前激活的筛选项加的类名与代码中不一致，可通过浏览器开发者工具检查对应li标签的类名，替换选择器即可
• 移动端使用时可适当调大#filters li a的上下内边距至14px以上，提升触控操作命中率
• 如果不需要悬停触发、仅想通过点击触发，删除代码中所有:hover相关选择器即可，:focus-within会在点击选项时自动展开下拉，点击页面其他区域后自动收起

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