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

生地瓜 发布于 01/08 10:08
阅读 35
收藏 0

**左右分级的多级菜单,某一级内容过多出现滚动条,并有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标签上。

加载中
返回顶部
顶部