首页 新闻 会员 周边 捐助

多级菜单,怎么使鼠标hover到滚动条或border时也能选择菜单?

0
悬赏园豆:10 [待解决问题]

左右分级的多级菜单,某一级内容过多出现滚动条,并有border时,怎么使鼠标hover到滚动条或border时也能选择菜单?即鼠标滑到border或滚动条上时,下一级菜单也不能消失,使鼠标平稳过渡到下一级菜单上。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #border-wrap{
            position:relative;
            width: 200px;
            height:150px;
            overflow: hidden;
            border-right: 10px solid blue;
            box-sizing: border-box;
            z-index: 4;
        }
        #scroll-wrap{
            height:100%;
            overflow-y:scroll;
            margin-right: -40px;
        }
        .ul-f{
            width: 200px;
            margin: 0;
            padding: 0;
        }
        .li-f{
            z-index: 9;
            height: 30px;
        }
        .li-f:hover{
            background: #ccc
        }
        .li-f:hover .ul-s{
            display: block;
        }
        .ul-s{
            position: fixed;
            left: 200px;
            top: 0;
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            display: none;
        }
        .active{
            background: #ccc;
        }
        .active >ul{
            display: block;
        }
    </style>
    
</head>
<body>
    <div id="border-wrap">
        <div id="scroll-wrap">
            <ul class="ul-f">
                <li class="li-f">
                    1111111
                    <ul class="ul-s">
                        <li class="li-s">11</li>
                        <li class="li-s">11</li>
                    </ul>
                </li>
                <li class="li-f">
                    2222222
                    <ul class="ul-s">
                        <li class="li-s">22</li>
                        <li class="li-s">22</li>
                    </ul>
                </li>
                <li class="li-f">
                    3333333
                    <ul class="ul-s">
                        <li class="li-s">33</li>
                        <li class="li-s">33</li>
                    </ul>
                </li>
                <li class="li-f">
                    4444444
                    <ul class="ul-s">
                        <li class="li-s">44</li>
                        <li class="li-s">44</li>
                    </ul>
                </li>
                <li class="li-f">
                    5555555
                    <ul class="ul-s">
                        <li class="li-s">55</li>
                        <li class="li-s">55</li>
                    </ul>
                </li>
                <li class="li-f">
                    6666666
                    <ul class="ul-s">
                        <li class="li-s">66</li>
                        <li class="li-s">66</li>
                    </ul>
                </li>
                <li class="li-f">
                    7777777
                    <ul class="ul-s">
                        <li class="li-s">77</li>
                        <li class="li-s">77</li>
                    </ul>
                </li>
            </ul>
    </div>
    </div>

</body>
</html>

代码如上,当鼠标滑动到蓝色border上时,下一级菜单就隐藏了,无法正常选择。请问各位大佬这个该怎么解决?先就此谢过。

注:有要求每一级菜单都纵向铺满全屏,右侧蓝色border也纵向满屏,但不是每一级li足够多,不一定都会有滚动条,所以border不能写在li标签上。

生地瓜的主页 生地瓜 | 初学一级 | 园豆:192
提问于:2019-01-08 10:04
< >
分享
所有回答(2)
-1

加个延时啊,3s或5s后

青青子衿619 | 园豆:300 (菜鸟二级) | 2019-01-08 10:24

延时效果不理想

支持(0) 反对(0) 生地瓜 | 园豆:192 (初学一级) | 2019-01-08 12:39
-1

box-sizing:border-box;

你风致 | 园豆:2215 (老鸟四级) | 2019-01-08 10:27

现在有这个,但没有效果

支持(0) 反对(0) 生地瓜 | 园豆:192 (初学一级) | 2019-01-08 12:40
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册