固定元素浮出另一个固定元素

Question

我注意到有关固定（固定的CSS位置）元素的浏览器行为不一致，该元素浮动出另一个固定元素。我使用jQuery“hover”方法来显示和隐藏第二个元素。

$("#listitem").hover(
    function() {
    	$("#sublist").css({visibility: "visible"});
    }, function() {
       $("#sublist").css({visibility: "hidden"});
    }
)

#div1 {
  position: fixed;
  z-index: 5;
  overflow-y: scroll;
  width: 200px;
  height: 100px;
  background-color: red;
}

#sublist {
  position: fixed;
  visibility: hidden;
  z-index: 10;
  left: 180px;
  top: 0;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <ul>
    <li id="listitem">1
      <ul id="sublist">
        <li>U1</li>
        <li>U2</li>
        <li>U3</li>
      </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
  </ul>
</div>

查看其实际操作（将第一个列表元素悬停）：https://jsfiddle.net/manueltaber/ras930wz/

在Chrome中，第二个固定元素始终显示在浏览器滚动条下。在IE（和Edge）中，第二个元素似乎是正确的，但当我将鼠标悬停在滚动条上时，div消失了。只有Firefox按预期工作。

是否可以始终在浏览器滚动条上显示第二个元素？