多级菜单，怎么使鼠标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标签上。
所有回答(2)
-1
加个延时啊，3s或5s后
延时效果不理想
-1
box-sizing：border-box;
现在有这个，但没有效果
