WordPress菜单添加垂直滚动并保留子菜单悬停弹出功能求助

1. 为Shop菜单添加垂直滚动 #

找到Shop菜单对应的下拉容器（可通过浏览器开发者工具定位元素类名），添加以下CSS限制高度并启用垂直滚动：

/* 替换为实际的Shop下拉容器选择器 */
.shop-menu-dropdown {
  max-height: 450px; /* 根据需求调整最大高度 */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

• max-height：设置下拉菜单的最大可视高度，超出部分自动滚动
• overflow-y: auto：仅在内容超出时显示垂直滚动条
• overflow-x: hidden：强制隐藏水平滚动，符合需求

2. 保留子菜单悬停弹出效果 #

为确保"GELOVI"这类子菜单能正常弹出，需要让子菜单脱离滚动容器的裁剪范围，添加以下CSS：

/* 针对Shop下拉中的带二级菜单的菜单项 */
.shop-menu-dropdown .menu-item-has-children {
  position: relative; /* 作为子菜单的定位基准 */
}

/* 二级子菜单样式 */
.shop-menu-dropdown .menu-item-has-children .sub-menu {
  position: absolute;
  left: 100%; /* 从父菜单项右侧弹出 */
  top: 0;
  max-height: unset;
  overflow: visible; /* 避免子菜单被滚动容器截断 */
  white-space: nowrap; /* 防止子菜单内容换行 */
}

注意事项 #

• 若上述选择器不匹配网站DOM结构，需通过浏览器F12工具查看实际类名（比如网站中Shop下拉菜单可能使用nav-dropdown或类似类名）
• 可根据页面布局调整max-height和子菜单的left/top值，确保显示位置合理
• 若滚动条样式不符合网站风格，可通过::-webkit-scrollbar自定义滚动条外观

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