弹出框无法被选中问题

大家好，我刚学习前端不久，对于弹出框有些问题，向各位大神请教。
图片说明
上图就是我遇到的问题，当鼠标悬停在li标签时，显示下方的ul弹出框，每个li切换不同的ul，但是，当鼠标在第一层的li上向下，想要选择对应的弹出框内容时，会触发第二行li的弹出框，所以，所有第一行的li都无选下边的弹出框,我看他们官网是不会影响的，除非在下边的li悬停1秒左右，才会触发它的弹出框

好像显示有问题，贴图给你~图片说明

使用计时器，鼠标进入后一秒触发
setInterval(function(){},1000)

图片说明

我写了一个简单的页面，实现了你要的效果，你看一下吧，希望能对你有帮助.
<!DOCTYPE html>




<br> *{<br> margin:0;<br> padding:0;<br> }<br> .main_ul{<br> width:200px;<br> border:1px solid red;<br> }<br> .main_ul li{<br> list-style: none;<br> margin-top:5px;<br> border:1px solid blue;<br> display: inline-block;<br> width:50px;<br> height:50px;<br> cursor:pointer;<br> }<br> .div1{<br> margin-top:10px;<br> }<br> .btn1{<br> color:red;<br> }<br>



  • tab1

  • tab2

  • tab3

  • tab4

  • tab5

  • tab6

  • tab7

  • tab8

  • tab9



我是按钮
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script>
        var timer;
        $(".main_ul li").hover(function(){
            var li=$(this);
            timer=setTimeout(function(){ //鼠标移入时1s后触发操作，函数体里面写你的操作
                $(".btn1").html(li.html());
            },1000)
        },function(){
            clearTimeout(timer);//如果在1s内鼠标移出则不会再触发函数
        })
    </script>
</body>