要解决按钮悬停时下拉div不出现且z-index无效的问题，可以使用一些CSS和JavaScript代码来实现。以下是一个示例：

HTML代码：

悬停按钮
下拉内容

CSS代码：

#dropdown {
  display: none; /* 初始状态下隐藏下拉内容 */
  position: absolute;
  z-index: 999; /* 设置较高的z-index，确保下拉内容位于其他元素之上 */
}

#hover-btn:hover + #dropdown {
  display: block; /* 当悬停在按钮上时显示下拉内容 */
}

JavaScript代码：

var dropdown = document.getElementById("dropdown");
dropdown.addEventListener("mouseover", function() {
  this.style.display = "block"; /* 当鼠标悬停在下拉内容上时保持显示 */
});

dropdown.addEventListener("mouseout", function() {
  this.style.display = "none"; /* 当鼠标移出下拉内容时隐藏 */
});

在上面的代码中，我们使用了CSS中的"+"选择器来选择按钮的下一个兄弟元素，即下拉div。当鼠标悬停在按钮上时，通过改变下拉div的display属性，来控制显示或隐藏下拉内容。当鼠标悬停在下拉内容上时，通过JavaScript代码来保持显示下拉内容。这样就能实现按钮悬停时下拉div不出现且z-index无效的效果。