结合不同的溢出属性

Question

我正在尝试创建类似于OS X的列视图的多线程导航：

在这里的标记中，我有一个列表，列在父<nav>中，具有已定义的高度。然后每个li向左浮动，定义宽度为height: 100%。然后我执行css triangle trick制作小箭头，并将其悬挂在下一列中，并带有正z-index。到目前为止，非常好。

然而，第2列太长了：我希望它滚动。但是，当我分配ul和overflow-y: auto时，我得到：

等一下！所有这些滚动条都来自哪里！？我不想要x的滚动条！但即使我设置overflow-x: visible，它也会忽略它并给我一个滚动条。遗憾的是，as specified。这有一个CSS解决方法吗？我是否必须编写一些胡思乱想的JavaScript来响应滚动列表并重新定位箭头？

编辑：添加jsbin