Navbar子下拉菜单悬停时无法保持显示的问题求助

问题描述 #

制作导航栏时添加了下拉菜单，但嵌套的子菜单在悬停时无法保持显示。尝试过jQuery、CSS + 选择器、独立隐藏div等方法均无效，控制台提示submenu未定义，无法继续推进。

核心错误原因 #

1. 变量作用域问题：submenu变量在$(document).ready()内部声明，外部的事件绑定代码无法访问该变量，导致控制台报错“submenu未定义”。
2. HTML结构缺陷：子菜单与父级链接为同级元素，鼠标从父链接移到子菜单时会触发父链接的mouseleave事件，导致子菜单隐藏。
3. CSS定位问题：子菜单的top值设置为20px，与父链接之间存在空隙，鼠标移动时容易触发离开事件。

修复方案 #

方案1：纯CSS实现（推荐，无需JS） #

调整HTML结构并优化CSS，利用:hover选择器直接控制子菜单显示，更简洁稳定。

调整HTML结构

将父链接与子菜单放入同一个容器，确保悬停范围覆盖两者：

<div class="dropdown-content">
  <!-- 添加容器包裹父链接和子菜单 -->
  <div class="dropdown-parent-item">
    <a class="parentdrop" href="#">Web Development &#9654;</a>
    <div class="dropdown-submenu">
      <a href="#">HTML</a>
      <a href="#">CSS</a>
      <a href="#">JavaScript</a>
    </div>
  </div>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</div>

优化CSS代码

给容器添加相对定位，调整子菜单的位置消除空隙：

.dropdown-parent-item {
  position: relative; /* 让子菜单相对于该容器定位 */
}

.dropdown-submenu {
  display: none;
  z-index: 1;
  left: 100%;
  top: 0; /* 改为0，与父链接顶部对齐，消除空隙 */
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  position: absolute;
}

/* 悬停容器时显示子菜单 */
.dropdown-parent-item:hover .dropdown-submenu {
  display: block;
}

方案2：修正jQuery代码（解决变量作用域与事件绑定问题） #

如果坚持使用jQuery，需要调整变量作用域并优化事件绑定逻辑：

$(document).ready(function(){
  // 直接使用jQuery选择器，避免变量作用域问题
  $(".parentdrop").on({
    mouseenter: function () {
      $(this).next(".dropdown-submenu").show();
    },
    mouseleave: function () {
      // 延迟隐藏，避免鼠标快速移动时误触发
      const $submenu = $(this).next(".dropdown-submenu");
      setTimeout(() => {
        if (!$submenu.is(":hover")) {
          $submenu.hide();
        }
      }, 100);
    }
  });

  $(".dropdown-submenu").on({
    mouseleave: function () {
      $(this).hide();
    }
  });
});

额外优化：修复导航栏布局问题 #

原CSS中.navbar a重复设置了float: left，可以清理冗余代码；同时.collapse按钮的right: 50%会导致按钮居中，若想放在右侧可改为right: 20px：

.navbar a {
  /* 移除重复的float: left */
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.collapse {
  position: absolute;
  background-color: rgb(80, 78, 78);
  color: #fffefed7;
  box-shadow: 0.3rem 0.3rem 5.5rem #525c5c, 0em 0em 0.9em #ffffff6b;
  cursor: pointer; 
  top: 10px; /* 调整top值，避免与导航栏高度冲突 */
  border-radius: 50%;
  border-color: rgba(32, 30, 30, 0.863);
  display: flex;
  align-items: center; 
  justify-content: center;  
  width: 25px;
  height: 25px;
  right: 20px; /* 改为右侧固定位置 */
  transition: background-color 0.2s ease-out 1ms;
}

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