HTML CSS下拉列表滚动条消失

Question

我有这个小提琴：https://jsfiddle.net/2ho2e8n4/

它在jsfiddle.net上运行正常，现在问题如下：

当悬停在子ol上时，它会显示下拉列表，其固定高度为600％（因此它将是6父li的高度），并将隐藏其余部分，以便您可以滚动它们。 / p>

我在所有浏览器上遇到的问题是，当我将鼠标从li移动到滚动条时，下拉列表会隐藏（好像＆＃34;悬停＆＃34;事件是不再发生）。出于某种原因，这种情况在jsfiddle.net上并没有发生，而是在Firefox，Chrome，IE等本地运行......确实如此。

当鼠标停留在＆＃34; hover时，如何阻止列表隐藏？在滚动条上？ 如你所见：

overflow: hidden

和

overflow: auto

正在使用

，我不知道会影响滚动条行为的任何其他属性。

如果无法做到这一点，那么另一种选择是隐藏滚动条但仍然可以使用鼠标滚轮滚动。

＆＃13;

＆＃13;

.filterTabs{
    margin: 0px;
    padding: 0px;
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
    float:left;
}
.filterTabs ol{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    text-align: center;
    float:left;
}
.filterTabs ol a{
    background: none;
    color: rgb(70,130,180);
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
    text-decoration: none;
}
#first,#second{
  height:600%;
}
.filterTabs ol li{
    position:relative;
    margin:0;
    padding:0;
}
.filterTabs ol li:hover{
    background:#ecf2f9
}
.filterTabs ol li ol li a:hover{
    background:#ecf2f9;
    color: rgb(70,130,180)
}
.filterTabs ol ol{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:rgb(70,130,180);
    padding:0;
    border:1px solid #ecf2f9;
    overflow-x: hidden;
    overflow-y: auto;
}
.filterTabs ol ol li{
    float:none;
    width:120px;
    text-align: center;
    border:0px solid cornflowerblue;
}
.filterTabs ol ol a{
    color: #fff;
    line-height:120%;
    padding:10px 15px
}
.filterTabs ol ol ol{
    top:0;
    left:100%
}
.filterTabs ol li:hover > ol{
    display:block
}
.tab-content{
    padding:0;
    border: 0;
    margin:0;
    overflow: auto;
    width: 100%
}

＆＃13;

<div class='filterTabs'>
   <ol>
      <li>
         <a>List▼</a>
         <ol id='first'>
            <li><a href=''>1</a></li>
            <li><a href=''>2</a></li>
            <li><a href=''>3</a></li>
            <li><a href=''>4</a></li>
            <li><a href=''>5</a></li>
            <li><a href=''>6</a></li>
            <li><a href=''>7</a></li>
            <li><a href=''>8</a></li>
            <li><a href=''>9</a></li>
         </ol>
      </li>
   </ol>
   <ol>
      <li>
         <a>AnotherList▼</a>
         <ol id='second'>
            <li><a href=''>1</a></li>
            <li><a href=''>2</a></li>
            <li><a href=''>3</a></li>
            <li><a href=''>4</a></li>
            <li><a href=''>5</a></li>
            <li><a href=''>6</a></li>
            <li><a href=''>7</a></li>
            <li><a href=''>8</a></li>
            <li><a href=''>9</a></li>
         </ol>
      </li>
   </ol>
</div>

＆＃13;

＆＃13;

＆＃13;