限制下拉菜单中的项目数量？

Question

以下是代码：

<ul class="multiselect-container dropdown-menu">
    <li>
        <a href="javascript:void(0);"><label class="checkbox"></label>

        <div class="checker">
            <label class="checkbox"><span><input name="multiselect" type=
            "checkbox" value="1"></span></label>
        </div>Menu Item</a>
    </li>

    <li>
        <a href="javascript:void(0);"><label class="checkbox"></label>

        <div class="checker">
            <label class="checkbox"><span><input name="multiselect" type=
            "checkbox" value="57"></span></label>
        </div>Menu Item</a>
    </li>

    <li>
        <a href="javascript:void(0);"><label class="checkbox"></label>

        <div class="checker">
            <label class="checkbox"><span><input name="multiselect" type=
            "checkbox" value="59"></span></label>
        </div>Menu Item</a>
    </li>

    <li>
        <a href="javascript:void(0);"><label class="checkbox"></label>

        <div class="checker">
            <label class="checkbox"><span><input name="multiselect" type=
            "checkbox" value="60"></span></label>
        </div>Menu Item</a>
    </li>

    <li>
        <a href="javascript:void(0);"><label class="checkbox"></label>

        <div class="checker">
            <label class="checkbox"><span><input name="multiselect" type=
            "checkbox" value="14"></span></label>
        </div>Menu Item</a>
    </li>
</ul>

我尝试做的是限制下拉菜单中的项目数量。例如，我只想在用户点击它时显示10个项目，然后他们可以向下滚动查看其余项目。

我现在遇到的问题是，下拉菜单中包含大量商品的用户目前已将其延伸到页面末尾...