当用户单击一个菜单到其他菜单

Question

当我们点击菜单C时它会打开子菜单，但是当我们点击B时它会关闭C的子菜单但不会打开B的子菜单（见小提琴）

    <div id="container" style="width: 250px;">
        <ul id="filter-menu-button-menu">
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>A</a>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-disk"></span>B</a> 
                <ul>
                    <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>     
                    </li>
                </ul>
            </li>
            <li><a href="#"><span class="ui-icon ui-icon-folder-open">  </span>C</a>
              <ul>
                   <li><a href="#">1A</a>
                    </li>
                    <li><a href="#">1B</a>
                    </li>
                    <li><a href="#">1C</a>
                    </li>
                    <li><a href="#">1D</a>
                    </li>
                    <li><a href="#">1E</a>     
                   </li>
            </ul>
        </div>

jQuery代码

$('#filter-menu-button-menu').menu({
    "position": {
        my: "right top",
        at: "left top",
        collision: 'flipfit'
    }
});
$('#filter-menu-button-menu').unbind('mouseenter mouseleave');

如果存在两个菜单B和C，则单击一个应该打开它的子​​菜单并关闭其他子菜单...我们怎么能这样做。      检查这个小提琴 http://jsfiddle.net/tAH6a/23/