嘿，作为前端新手遇到这种z-index和hover隐藏的问题太正常了，我帮你拆解下解决方案：

一、下拉菜单被“员工列表”Div盖住的问题 #

你现在的核心问题其实不是z-index本身，而是**overflow-y: hidden截断了下拉菜单**！

看你的CSS里，.navbar-menu设置了overflow-y: hidden，这个属性会创建一个“裁剪区域”，所有超出这个容器高度的内容都会被隐藏——而你的下拉菜单是绝对定位在.navbar-menu-each下方，自然会超出.navbar-menu的高度，被裁剪后看起来像是在员工列表Div下面。

解决步骤：

1. 先去掉.navbar-menu的overflow-y: hidden，只保留overflow-x: auto来处理横向滚动需求：

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  /* 删掉 overflow-y: hidden */
  z-index: 6;
}

2. 给下拉菜单设置一个足够高的z-index（确保它在员工列表上方）：

.submenu-dropdown {
  display: none;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: absolute;
  top: 100%; /* 改成100%让下拉菜单紧贴父元素，避免鼠标移动间隙 */
  left: 0;
  z-index: 10; /* 新增这个，确保层级高于员工列表 */
}

3. 检查“员工列表”Div的z-index：如果它的z-index是-1，只要你的下拉菜单所在的父容器（.navbar）没有设置更低的z-index，现在下拉菜单应该能正常显示在它上方了。

二、鼠标离开菜单/下拉菜单时自动隐藏下拉菜单 #

你现在用的CSS hover写法有个小问题：如果菜单和下拉菜单之间有空隙，鼠标移动时会突然消失。这里给你两种方案：

方案1：纯CSS优化（推荐，简单）

调整下拉菜单的位置，让它和父菜单完全贴合，同时给父菜单加一点底部内边距，扩大hover区域：

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 8px; /* 新增，扩大hover触发区域 */
  display: inline-block;
  position: relative;
}

.submenu-dropdown {
  top: 100%; /* 改成100%，让下拉菜单紧挨着父菜单底部 */
  left: 0;
}

这样鼠标从菜单移到下拉菜单时不会有空隙，CSS的hover规则就能正常生效，离开区域后自动隐藏。

方案2：JS增强（适合复杂场景）

如果需要更灵活的控制（比如点击页面其他地方也隐藏），可以用JS实现：

// 鼠标进入菜单时显示下拉
$(".navbar-menu-each").on("mouseenter", function() {
  $(this).find(".submenu-dropdown").show();
});

// 鼠标离开菜单/下拉菜单时隐藏
$(".navbar-menu-each").on("mouseleave", function() {
  $(this).find(".submenu-dropdown").hide();
});

// 点击页面其他区域也隐藏下拉菜单
$(document).on("click", function(e) {
  // 判断点击的元素是否在菜单或下拉菜单内部
  const isMenuArea = $(e.target).closest(".navbar-menu-each, .submenu-dropdown").length;
  if (!isMenuArea) {
    $(".submenu-dropdown").hide();
  }
});

修改后的完整代码片段（关键部分） #

CSS：

.navbar-menu {
  width: 100%;
  overflow-x: auto;
  z-index: 6;
}

.navbar-menu-each {
  padding-left: 32px;
  padding-right: 32px;
  padding-bottom: 8px;
  display: inline-block;
  position: relative;
}

.submenu-dropdown {
  display: none;
  background-color: #fff;
  box-shadow: 0px 3px 6px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
}

.navbar-menu-each:hover > .submenu-dropdown, .submenu-dropdown:hover {
  display: block;
}

JS（如果用方案2）：

$(".burger-btn-wrapper").click(function() { 
  $(".main-sidebar").toggleClass("main-sidebar-view"); 
});

// 下拉菜单控制
$(".navbar-menu-each").on("mouseenter", function() {
  $(this).find(".submenu-dropdown").show();
});

$(".navbar-menu-each").on("mouseleave", function() {
  $(this).find(".submenu-dropdown").hide();
});

$(document).on("click", function(e) {
  const isMenuArea = $(e.target).closest(".navbar-menu-each, .submenu-dropdown").length;
  if (!isMenuArea) {
    $(".submenu-dropdown").hide();
  }
});

这样调整后，下拉菜单就能正常显示在员工列表上方，并且鼠标离开区域后会自动隐藏啦～

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