WordPress站点备份恢复后下拉菜单无法正常工作问题求助

故障核心原因 #

现有代码存在3个直接导致下拉菜单失效的问题：

• .navbar-nav 设置了 overflow: hidden 属性，会直接裁剪超出容器高度的下拉子菜单
• 缺少子菜单默认隐藏、父级菜单项hover时显示的交互逻辑
• 没有给子菜单设置绝对定位，会直接撑开父级菜单高度，破坏导航整体布局

修复后完整CSS代码 #

.navbar-nav.ml-auto.menu_item {
    margin-top: 20px;
}

.navbar-nav {
    /* 移除原有overflow: hidden，避免裁剪子菜单 */
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav a {
    text-decoration: none;
    text-align: center;
    padding: 10px 12px;
}

/* 给带子菜单的父级菜单项添加相对定位，作为子菜单定位锚点 */
.menu-item-has-children {
    position: relative;
}

.sub-menu {
  list-style: inherit;
  margin: 0;
  padding-left: 0;
  /* 新增下拉菜单基础样式 */
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 999;
}

.sub-menu a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.sub-menu li {
  text-decoration: none;
  display: block;
  text-align: left;
  width: 100%;
}

.sub-menu li:hover {
  float: none;
  color: #000000;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* 修正hover触发逻辑：父级菜单项hover时显示子菜单 */
.navbar-nav a:hover {
  background-color: #FBAF1B;
}
.menu-item-has-children:hover > .sub-menu {
  display: block;
}

.menu-main-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu_item a {
    font-size: 18px !important;
    font-weight: 900;
    color: #031229 !important;
    text-transform: uppercase;
    display: inline-block;
}

关键修改说明 #

1. 移除.navbar-nav的overflow: hidden属性，解决子菜单被容器裁剪的问题
2. 给带子菜单的父级元素.menu-item-has-children添加相对定位，作为子菜单的定位基准
3. 给.sub-menu添加默认隐藏、绝对定位样式，指定z-index确保子菜单层级高于其他页面元素
4. 替换原有错误的.sub-menu:hover .sub-menu触发规则，改为父级菜单项hover时触发子菜单显示
5. 给顶层菜单.menu-main-menu添加flex布局样式，恢复原有横向排列的导航结构

HTML结构优化建议 #

现有HTML存在重复类名冲突问题：外层<div class="navbar-nav ml-auto menu_item">和内层<ul class="navbar-nav">共用navbar-nav类名，会导致样式匹配混乱，建议将内层ul的类名修改为自定义的navbar-nav-list，同步调整CSS中对应选择器即可，避免后续出现样式冲突。

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