无法点击超出div高度的溢出元素

Question

我正在尝试复制角度材质选择，但是在定位和事件方面遇到了一些麻烦。

https://jsfiddle.net/eptcjssy/

我有一个父母div

.fancy-select-container {
position: relative;
padding: 2px;
margin: 0;
vertical-align: middle;
width:434px;
text-align: left;   
display:block;
height:35px;
}

和一个孩子div

.fancy-select-container .list-container{
width:100%;
position:absolute;
top:100%;
max-height:200px;
background-color:white;
}

然后是子div中一个列表，该列表的高度大于父div，因为它是一个列表。

问题是我只能单击/悬停第一个列表项，因为它在父div高度内。 我尝试使用z-indexes，但并没有获得太多乐趣。 如何使溢出的部分也接收事件？

谢谢

Answer 1

从我所看到的，您需要将“ .list-item”类应用于列表中的所有项目。

小提琴的例子。

<li class="list-item">1</li>
<li class="list-item">2</li>
<li class="list-item">3</li>
<li class="list-item">4</li>
<li class="list-item">5</li>
<li class="list-item">6</li>

https://jsfiddle.net/agvxqge6/