网站二级分类菜单Hover无响应问题排查求助

嘿，我瞅了下你的代码，问题出在HTML结构和CSS选择器不匹配上！

问题根源 #

你写的CSS规则 .categoriesep:hover .categoriesep-content 意思是：当鼠标悬停在.categoriesep按钮上时，显示它直接包含的子元素里的.categoriesep-content。但看你的HTML结构，.categoriesep-content是跟在<a>标签外面的，和按钮是同级关系，并不是按钮的子元素——这就导致CSS选择器根本找不到要显示的子菜单元素。

另外还有个小规范问题：你重复使用了同一个id="categoriesep"和id="categoriesep-content"，HTML里id必须是唯一的，虽然这不会直接导致子菜单不显示，但建议改成只用class（你本来也靠class控制样式）。

修复方案 #

1. 调整HTML结构，给每个分类项加容器

把每个分类按钮和对应的子菜单包裹在一个容器里，这样hover容器时就能触发子菜单显示：

<div class="dropdown-categorii">
  <button class="categorii" id="categorii">CATEGORII</button>
  <div class="dropdown-content-categorii" id="dropdown-content-categorii">
    <!-- 每个分类项单独用容器包裹 -->
    <div class="category-item">
      <a href="prod.php?categ=+PLASE+INSECTE"><button class="categoriesep"> PLASE INSECTE</button></a>
      <div class="categoriesep-content">This will be content</div>
    </div>
    <div class="category-item">
      <a href="prod.php?categ=ACCESORII+CONSTR.CASA+INTERIOR"><button class="categoriesep">ACCESORII CONSTR CASA INTERIOR</button></a>
      <div class="categoriesep-content">This will be content</div>
    </div>
    <!-- 其他分类项按同样方式修改 -->
  </div>
</div>

2. 修改CSS选择器

替换原来的子菜单hover触发规则，改为hover分类容器时显示子菜单：

/* 替换掉原来的 .categoriesep:hover .categoriesep-content 规则 */
.category-item:hover .categoriesep-content {
  display: block;
}

/* 可选：优化子菜单定位，避免错位 */
.category-item {
  position: relative;
  margin-top: 10px; /* 保持原有的间距 */
}
.categoriesep-content {
  margin-left: 0; /* 去掉原来的margin-left */
  left: 100%; /* 相对于分类容器右侧对齐 */
  top: 0;
}

这样调整后，当你鼠标悬停在任何一个分类按钮上时，对应的子菜单就会正常显示了，而且定位也会更准确。

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