Панель инструментов кнопки jquery UI с меню

Мой JSFIDDLE ЗДЕСЬ:

Задача:

1. Панель инструментов панели инструментов jqueryui на странице внизу; панель инструментов закрыта внизу.
2. Использование идеи из http://jqueryui.com/button/#splitbutton; Когда кнопка нажата, меню должно появиться на верхней стороне, так как панель инструментов закрыта снизу.

Оба выше не работают.

HTML:

<div id="toolbar" class="ui-widget-header ui-corner-all sticky">
    <button id="gear">gear</button>
    <ul>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Links</a></li>
    </ul>
    <button id="disk">disk</button>
    <ul>
        <li><a href="#">Usage</a></li>
        <li><a href="#">Quota</a></li>
    </ul>
    <button id="trash">trash</button>
    <ul>
        <li><a href="#">Files</a></li>
        <li><a href="#">Folders</a></li>
    </ul>
</div>

JS:

$(function () {
    //
    //gear Button
    //
    $("#gear").button({
        label: "gear",
        text: false,
        icons: {
            primary: "ui-icon-gear"
        }
    }).click(function (event) {
        event.preventDefault();
        var menu = $(this).next().show().position({
            my: "left top",
            at: "left bottom",
            of: this
        });


    }).next().hide().menu();
    //
    //disk Button
    //
    $("#disk").button({
        label: "disk",
        text: false,
        icons: {
            primary: "ui-icon-disk"
        }
    }).click(function (event) {
        event.preventDefault();
    }).next().hide().menu();
    //
    //trash Button
    //
    $("#trash").button({
        label: "trash",
        text: false,
        icons: {
            primary: "ui-icon-trash"
        }
    }).click(function (event) {
        event.preventDefault();
    }).next().hide().menu();


});