在可滚动元素上创建渐变叠加

Question

我有一个可滚动的元素，我想用渐变覆盖。然而，我尝试过使用：before和fixed / absolute locate元素。但是，要么它不合适，要么叠加不允许我向下滚动。

我必须忽略一些简单的事情。有谁知道如何处理这个问题？

HTML     

<ul>
<li>Week 1</li>
<li>Week 2</li>
<li>Week 3</li>
<li>Week 4</li>
<li>Week 5</li>
<li>Week 6</li>
</ul>

</div>

CSS

ul {
text-align:center;
width:40%;
height: 300px;
overflow: auto;
display:inline-block;
position:relative;
}

ul li {
margin: auto;
position:relative;
cursor: pointer;
padding:30px;
background-color: #FBFBFB;
font-size:30px;
vertical-align: middle;
display:block;
}

.center{text-align:center;}

这是包含我基本结构的小提琴： https://jsfiddle.net/dnw0o19k/