jQuery-Ui菜单栏选择不从顶级开火

Question

标准jQuery-Ui菜单从任何菜单项触发选择事件，但菜单栏不会对顶级项目执行此操作。

请在此处查看测试代码http://jsfiddle.net/sPSn8/1/

并尝试两者中的顶级项目（水平菜单栏和垂直菜单）

无论如何解决这个问题？

谢谢，Fausto

下面的JSFiddle代码（发布时请求）

HTML

<ul id="bar1" class="menubar">
    <li><a href="#About">About</a></li>
    <li>    <a href="#File">File</a>
        <ul>
            <li><a href="#Open...">Open...</a>
            </li>
            <li class="ui-state-disabled">Open recent...</li>
            <li><a href="#Save">Save</a>
            </li>
            <li><a href="#Save as...">Save as...</a>
            </li>
            <li><a href="#Close">Close</a>
            </li>
            <li><a href="#Quit">Quit</a>
            </li>
        </ul>
    </li>
    <li>    <a href="#Edit">Edit</a>

        <ul>
            <li><a href="#Copy">Copy</a>
            </li>
            <li><a href="#Cut">Cut</a>
            </li>
            <li class="ui-state-disabled">Paste</li>
        </ul>
    </li>
    <li>    <a href="#View">View</a>

        <ul>
            <li><a href="#Fullscreen">Fullscreen</a>
            </li>
            <li><a href="#Fit into view">Fit into view</a>
            </li>
            <li>    <a href="#Encoding">Encoding</a>

                <ul>
                    <li><a href="#Auto-detect">Auto-detect</a>
                    </li>
                    <li><a href="#UTF-8">UTF-8</a>
                    </li>
                    <li> <a href="#UTF-16">UTF-16</a>

                        <ul>
                            <li><a href="#Option 1">Option 1</a>
                            </li>
                            <li><a href="#Option 2">Option 2</a>
                            </li>
                            <li><a href="#Option 3">Option 3</a>
                            </li>
                            <li><a href="#Option 4">Option 4</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#Customize...">Customize...</a>
            </li>
        </ul>
    </li>
</ul>
<!-- Simple Menu from jquery ui-->
<br>
<br>

<ul id="menu">
    <li class="ui-state-disabled"><a href="#">Aberdeen</a>
    </li>
    <li><a href="#">Ada</a>
    </li>
    <li><a href="#">Adamsville</a>
    </li>
    <li><a href="#">Addyston</a>
    </li>
    <li>
<a href="#">Delphi</a>

        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a>
            </li>
            <li><a href="#">Saarland</a>
            </li>
            <li><a href="#">Salzburg</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Saarland</a>
    </li>
    <li>
<a href="#">Salzburg</a>

        <ul>
            <li>
<a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>
                    </li>
                    <li><a href="#">Saarland</a>
                    </li>
                    <li><a href="#">Salzburg</a>
                    </li>
                </ul>
            </li>
            <li>
<a href="#">Delphi</a>

                <ul>
                    <li><a href="#">Ada</a>
                    </li>
                    <li><a href="#">Saarland</a>
                    </li>
                    <li><a href="#">Salzburg</a>
                    </li>
                </ul>
            </li>
            <li><a href="#">Perch</a>
            </li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a>
    </li>
</ul>
    <div id="demo">...</div>

JS

$(function () {
    function select(event, ui) {
        $('#demo').append(ui.item.children().text() +"<br>");
    }
    $("#bar1").menubar({
        autoExpand: true,
        menuIcon: true,
        buttons: false,
        position: {
            within: $("#demo-frame").add(window).first()
        },
        select: select
    });
    // testing Simple menu for hover effetc    
    $("#menu").menu({select: select});

});

CSS

.ui-menu {
    width: 150px;
}