水平滚动选项卡，没有滚动条

我有一个导航栏，其中包含基于Materialize CSS(http://materializecss.com/tabs.html(的不同选项卡。我的选项卡多于浏览器窗口的宽度，因此它会自动生成水平滚动条。这对于现代网站来说很难看，所以我正在寻找一种隐藏它但仍允许滚动的方法。

关于 SO 的其他评论提到了对嵌套div 使用定位，但是，我似乎无法在这种情况下让它工作，所以我想知道是否有人可以指出我做错了什么？

以下是到目前为止我的代码的代码笔：http://codepen.io/anon/pen/LGvQRP

这是代码：

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</div>

还有javascript：

$(document).ready(function(){
    $('ul.tabs').tabs();
});

此外，我想扩展它，以便所选选项卡始终位于中间，并且滚动将是无限的，并且在所有选项用尽后重新启动。有人对此有任何提示吗？