弹出菜单无法被选中问题

    各位好~
        我想要实现的功能遇到了问题，请各位好心人帮帮忙~
  我有一个弹出菜单（2行5列），鼠标悬停在一个位置时，在下方指定位置弹出一个弹出框。
  问题描述：
  1.当鼠标悬停第一行的某个LI时，并想要选择下方的弹出框，无法选中。因为鼠标会经过第二行的LI元素，这个LI元素的弹出框会顶替掉之前的弹出框。
  2.弹出框无法选中：因为弹出框与LI元素有几像素的空白距离，导致鼠标移动出LI元素时，下方的弹出框就隐藏了。
  我的JS代码如下：

$('#main_nav').on('mouseenter','ul.lf>li',function(){
var index=$(this).index();
console.log(index);
$("ul.lf>li").children('ul.category:eq('+index+')').show();
});
$('#main_nav').on('mouseleave','ul.lf>li',function(){
var index=$(this).index();
$("ul.lf>li").children('ul.category:eq('+index+')').hide();
});

建议仔细检查一下 代码，如果可以 可以尝试使用下拉的js插件

你让他使用绝对定位，z-index值大于第二行也该可以。解决这个问题

你这个属于正常的情况，弹框与元素应该挨着。如果你需要留点距离，可以使弹框留白。