OS X の列ビューに似たマルチスレッド ナビゲーションを作成しようとしています。

<nav>ここのマークアップでは、高さが定義された親にあるリストのリストを取得しています。次に、それぞれliが定義された幅とheight: 100%. 次に、css の三角形のトリックを実行して小さな矢印を作成し、正のz-index. ここまでは順調ですね。
ただし、列 2 は長すぎます。スクロールしたいのです。ただし、それを に割り当てるとul、次のようになります。overflow-y: auto

ちょっと待って!あのスクロールバーはどこから来たの!? x のスクロールバーが欲しくなかった! しかし、設定overflow-x: visibleしても無視され、スクロールバーが表示されます。残念ながら、これは指定どおりです。これに対する CSS の回避策はありますか? リストのスクロールに反応して矢印の位置を変更するには、厄介な JavaScript を作成する必要がありますか?
編集:jsbinを追加