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以获取更多信息吗？