Jquery下拉菜单重叠另一个

Question

我有一个显示产品信息的表格。

现在，当用户将鼠标悬停在每一行的“更多”选项上时，它应该会显示其他选项 - 准确地说是 5 个。

我有一个动态构建“更多”选项的函数

$(document).ready(function() {
   $(".nav li").each(function () {

   more_html= "<ul><li><a href='#'>Option 1</a></li><li><a href='#'>Option 2</a></li><li><a href='#'>Option 3</a></li><li><a href='#'>Option 3</a></li><li><a href='#'>Option 4 </a></li><li><a href='#'>Option 5</a></li></ul> "

  $(this).append(more_html)
  });
});

以及另一个将下拉功能附加到“更多”的事件。我正在使用 JQuery 下拉插件。

jQuery('.nav li').live('hover', function() {

  $('.nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, 

  function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));

  });
});

现在解决问题。

当我将鼠标悬停在第一行的更多链接上时，菜单会下拉。 但是当我通过菜单向下移动鼠标时，我点击了第二行的“更多”链接，这导致我失去了第一行的更多下拉菜单。现在它显示第二行的更多选项下拉菜单。

我相信我需要一种方法来在菜单已经就位时禁用第二行或后面行的更多菜单上的悬停选项。 但我不能这样做！

为下拉菜单提供更高的 z-index 是否有帮助？我一直在努力解决这个问题。请帮忙！

Answer 1

快速猜测是您的 CSS。你的第二个函数为 .nav li 设置了一个悬停，它附加了另一个内部 li，这反过来也应该是 .nav li 脚本的答案。您能否发布相关的 CSS 以获取更多信息？