你的问题根源在于事件绑定的目标不对，而且选择子菜单的方式也有小问题，咱们一步步来修正：

先说说原来代码的两个问题 #

1. 你把hover事件绑定在了.menu-item > a上——这意味着只要鼠标离开这个链接标签，不管是不是移到子菜单里，都会触发隐藏逻辑，这就是子菜单一移上去就消失的核心原因。
2. 你用了$(this).find('.sub-menu')，但看你给出的HTML结构，.sub-menu是.menu-item的子元素，和<a>是同级关系，并不是<a>的后代，所以这个选择器其实是找不到子菜单的（如果你的实际代码能生效，可能是结构有细微差异，但咱们按你给出的标准结构来修正）。

正确的实现思路 #

把hover事件绑定在**整个父菜单容器.menu-item**上，因为它是父链接和子菜单的共同容器。这样鼠标在父链接和子菜单之间移动时，都属于在.menu-item内部，不会触发离开事件；只有当鼠标完全离开这个容器时，才会隐藏子菜单。

代码实现 #

基础版（直接显示/隐藏）

// 绑定hover的两个回调：进入时显示，离开时隐藏
$('.menu-item').hover(
  function() {
    // 这里用$(this).find就能找到子菜单，因为它是.menu-item的后代
    $(this).find('.sub-menu').show();
  },
  function() {
    $(this).find('.sub-menu').hide();
  }
);

带动画的版本（更流畅）

如果想要过渡效果，可以替换show()/hide()为淡入淡出动画：

$('.menu-item').hover(
  function() {
    $(this).find('.sub-menu').fadeIn(200); // 200是动画时长，单位毫秒
  },
  function() {
    $(this).find('.sub-menu').fadeOut(200);
  }
);

用mouseenter/mouseleave分开绑定的写法（和hover效果一致）

如果你更喜欢拆分事件逻辑：

$('.menu-item').on('mouseenter', function() {
  $(this).find('.sub-menu').show();
});

$('.menu-item').on('mouseleave', function() {
  $(this).find('.sub-menu').hide();
});

为什么这样能解决问题？ #

.menu-item是父链接和子菜单的共同容器，当鼠标从父链接移到子菜单时，并没有离开.menu-item元素，所以不会触发mouseleave事件，子菜单会保持显示状态；只有当鼠标完全移出整个.menu-item区域（包括父链接和子菜单）时，才会触发隐藏逻辑，完美符合你想要的交互效果。

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