弹出菜单无法被选中问题

各位好~
我想要实现的功能遇到了问题，请各位好心人帮帮忙~
我有一个弹出菜单（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();
});

要看你的html代码，贴出来看看。

这个应该是你的css问题吧？
1、你应该吧弹窗的元素定位到第二行的上面，将z-index设置大一些。或者是直接弹窗的过程将第二行自动往下挤，不要使用定位
2、子元素和父元素有间距，调试下css，不要有间隙，否则你设置了隐藏子元素的话就无法在操作子元素对象了