要避免关键帧动画导致导航菜单中的子菜单溢出，你可以使用CSS的overflow属性和jQuery的stop()方法来解决。下面是一个示例代码：

HTML:

CSS:

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

nav ul li:hover ul {
  display: block;
}

@keyframes example {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

nav ul li ul li {
  animation: example 1s;
}

/* 添加以下代码以避免溢出 */
nav ul li ul li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

nav ul li ul li:hover {
  overflow: visible;
}

jQuery:

$("nav ul li ul li").hover(function() {
  $(this).stop();
});

这段代码中，我们使用了CSS的overflow属性来控制子菜单的溢出效果。当子菜单的宽度超过了父菜单的宽度时，使用overflow: hidden;属性来隐藏溢出的部分，并使用text-overflow: ellipsis;属性在溢出部分显示省略号。当鼠标悬停在子菜单上时，使用overflow: visible;属性来显示完整的内容。

在jQuery部分，我们使用了stop()方法来停止正在进行的动画，以避免关键帧动画导致的溢出问题。

注意：在实际使用中，你可能需要根据自己的需求调整CSS的属性值和jQuery的选择器。