html溢出:隐藏在下拉菜单中

我正试图解决我的slyding下拉菜单中的溢出问题。对于slyding，我使用的是als-js框架。问题是，如果我设置了overflow：hidden属性，我的下拉菜单将不再可见。如果我只是设置溢出-x:隐藏，我会得到一个滚动条。

<div class="als-container" id="cssmenu"> <span class="als-prev"><img src="back.png" alt="back" title="previous" /></span>
<div class="als-viewport">
    <ul class="als-wrapper">
        <li class='als-item active'><a href='index.html'>Home</a>
            <ul>
                <li class='final'><a href='#'>Test 1</a>
                </li>
                <li class='final'><a href='#'>Test 2</a>
                </li>
            </ul>
            <li class=' als-item has-sub '><a href='#'>Products</a>
                <ul>
                    <li class='final'><a href='#'>Product 1</a>
                    </li>
                    <li class='final'><a href='#'>Product 2</a>
                    </li>
                    <li class='final'><a href='#'>Product 2</a>
                    </li>
                    <li class='final'><a href='#'>Product 2</a>
                    </li>
                    <li class='final'><a href='#'>Product 2</a>
                    </li>
                    <li class='final'><a href='#'>Product 2</a>
                    </li>
                </ul>
            </li>
            <li class="als-item"><a href='#'>About</a>
            </li>
            <li class='als-item active'><a href='index.html'>Admin</a>
            </li>
            <li class='als-item active'><a href='index.html'>Route</a>
            </li>
    </ul>
</div>

jQUery：

$(document).ready(function () {
$("#cssmenu").als({
    visible_items: 4,
    scrolling_items: 2,
    orientation: "horizontal",
    circular: "yes",
    autoscroll: "no"
});
});

这是我小提琴的链接。http://jsfiddle.net/9zapu02q/11/

也许有人能帮我找到解决办法。