overflow-y的CSS问题

Question

我的网站上有一个视频播放器，右侧有一个视频列表。此列表将随着时间的推移而不断增长，因此需要将overflow-y: scroll;添加到我的CSS中。

但与此同时，我有一个漂亮的小悬停效果，在悬停时和点击后添加箭头。

问题是，当我向容器添加overflow-y: scroll;时，它会移除我的箭头效果，是否有人知道如何同时保持滚动效果和箭头？

请参阅FIDDLE以获取示例。

您会注意到我添加了评论，我认为应该添加溢出，但我可能会弄错：

/*THIS IS WHERE I NEED TO ADD OVERFLOW-Y SCROLL*/
#My-Vids #videos .list ul {
    background-color:#004461;

    height:482px;
    margin:20px
}

编辑，看看会发生什么，只需将overflow-y: scroll;放入我的代码中。

Answer 1

你需要做一些事情：

• 删除列表中的margin-left
• 添加padding-left以匹配原始金额
• 从列表中删除背景颜色
• 将该背景颜色应用于列表项
• 将您的列表标题<p>元素更改为使用padding而不是margin。

最终结果是this，我相信这是你想要的效果。