弹出菜单无法被选中问题

Question

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

Answer 1

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